HTML and CSS 4-position, floats, Z-Index

ArticleDirectory

• 1. Default position: static position
• 2. Absolute location-absolute position
• 3. Relative positioning-Relative Position
• 4. Fixed positioning-Fixed Position
• 5. Floating-floats
• 6. Float-clear floats
• 7. Z-index-my name is Z-index.

What about html and CSS? 1. tag attributes and elements

What about html and CSS? 2-css

What about html and CSS 3-HTML intermediate

Well, it seems that there are still many points to go deep... For example, different browsers have their own default styles for all DOM elements. This default style gives external representation of tag semantics, Which is why H1 ~ H6 is in bold by default. At first glance, you will know that it is the title material ~

1. Default position: static position

The position attribute value of all element styles is static. Position: static enables the element to normally render the stream. Nothing to say ..

2. Absolute location-absolute position

Relative to the root element html

Relative to other container elements

The absolute positioning element is always located relative to the container element that contains it, regardless of the positioning attribute of the container element that contains it. Therefore, the absolutely positioned element is separated from the normal element rendering stream (the block element is from top to bottom, and the inline element is left to right ).

In the eyes of non-absolute positioning elements: the absolute positioning of the buddy is a madman, let it go for fun, we are living normally, you can ignore its existence when rendering it.

3. Relative positioning-Relative Position

Relatively positioned elements are not separated from normal element rendering streams. The adjacent elements are displayed in normal mode,

In the eyes of ordinary elements: the relative positioning of the buddy is a little different, you can use the left and top attributes everywhere, but it is not too good. Let's take care of it when presenting it.

The relative positioning element "relative" is not relative to other elements, but relative to the element in the current rendering stream without adding position: its position before relative! (I understand, but it's too much TMD)

 

The combination of absolute positioning and relative positioning can achieve various positioning effects.

4. Fixed positioning-Fixed Position

Fixed positioning is the highlight of CSS positioning history. Unfortunately, ie eyes grow behind PP and cannot see it, so it is unfriendly to it .. Especially the IE6 asshole!

Fixed positioning and absolute positioning are the same crazy!

Absolute positioning is relative to the parent container element; Fixed positioning is only relative to the browser's window (viewport ).

5. Floating-floats

Float in CSS is not intended for positioning! I want to float the elements to achieve content or element layout!

6. Float-clear floats

Clear the floating on element a so that a does not surround other floating elements. On the other hand, floating elements are normally rendered around the adjacent content. When the adjacent elements apply the clear attribute, they are separated from floating elements.

Clear can contain left, right, and both.

The most streamlined Clearfix Statement (from the ancient dog ):

. Clearfix {ZOOM: 1 ;}

. Clearfix: After {

Content: '\ 20'; display: block; clear: both;

}

Note:

Content: '\ 20' specifies to add a blank character after the floating list,

First, this character is invisible and does not need to be hidden by visibility: hidden,

Second, he has no height, and does not need height: 0 to hide his height...

7. Z-index-my name is Z-index.

To put it bluntly, it is the index number (serial number) when the elements are stacked ). Z-index creates the coordinates of the stack direction for the element.