Some in-depth discussion of position and float properties in CSS

A very good article, hereby reproduced, the article turns from: http://www.cnblogs.com/coffeedeveloper/p/3145790.html

For position, float we use in peacetime can be said to use a very high frequency of the two CSS properties, for the use of these two attributes may be a lot of people there are some vague and unclear place. This article mainly on the use of the two properties of an introduction and two properties of the cross-use of some of the discussion.

This paper mainly discusses the points:

1. Basic usage of Position and float properties
2. Effects of Position and float properties on elements
3. Position, float properties Cross use the above effects
4. Tips on using Position and float properties

Structure points of this article:

1. Basic points of HTML layout (point I jump directly)
   Box model
   Normal flow of HTML
2. Position attribute (point I jump directly)
   Property value Introduction
   Usage Introduction
   Some little knowledge about position.
3. Float Property (point I jump directly)
   Property value Introduction
   Usage Introduction
   compatibility issues with position

Basic elements of HTML layout:

If you want to master, use good position, float property must have a clear understanding of the two basic points of HTML.

1. Box model
2. Normal flow of HTML (normal flow)

Box model

There are two types of box models for elements in HTML: block elements, inline elements, and note that the block and inline elements (inline) are not equal to the values of the inline, block two attribute in the display property. The inline, Block in the box model is similar to the parent class of the display property, for example: the List-item property value in the Display property is of type block (block).

We intuitively look at the difference between the two box models

• An element of block type can set the width, Height property, and the inline (inline) type setting is not valid.
• An element of the block type will have a single row (visually, a newline display, cannot be displayed in the same row as other elements, unless you actively modify the style of the element), while elements of the inline (inline) type are displayed on a single line.
• The width of an element of block type defaults to 100%, while elements in the inline (inline) type determine the widths based on their own content and child elements.

List some of the common elements of the classification

• Block elements: P, DIV, UL, LI, DD, DT ...
• Inline elements: A, IMG, SPAN, strong ...

Normal flow of HTML

The browser reads the HTML source code according to the order in which the elements appear in the code, and the final element is rendered based on the box model of the element. The inline elements are from left to right, and the block elements are from top to bottom. such as

<style type= "text/css" >  div {width:100px; height:50px; line-height:50px; text-align:center; color: #fff;}  Strong {background: #808080;}  EM {background: #ffd800;}  span {background: #b6ff00;} </style><strong>strong</strong><em>em</em><span>span</span><div Style= "Background:blue" >a</div><div style= "background:red" >b</div><div style= "background : Green ">C</div>

If you do not change the default style of the element, the element will "occupy" a position in the normal flow of the HTML, while the size and position of the "Occupy" position are determined by the box model of the element. Therefore, it is a key point for the subsequent position and float properties to leave the element out of this normal flow .

Position properties:

Let's first talk about the position property, because the position attribute is a good representation of the HTML common flow feature. The focus is on whether there are two points from normal flow and changing display properties after applying different position values.

Position property Value

There are four static, relative, absolute, fixed position attribute values.

Static

All elements are static by default, while the relative positioning and absolute positioning that we often use on the layout are position, bottom, left, and right in the case where position is static. The usage is: after changing the element's position property, you can reset the element to static to return it to the default normal stream of the page.

Relative

Commonly known as relative positioning, the emphasis is on relative understanding. We said that each element in the normal flow of the page will have a "occupy" a position, which can be understood as the default location, and relative positioning is the element from the default position, but the normal flow remains the original default position, and is not separated from Normal flow, just a visual offset.
Let's start with a block element to make an example:

<style type= "Text/css" >div{width:100px; height:50px; line-height:50px; text-align:center; color: #fff;} </style><div style= "Background:blue" >a</div><div style= "background:red; position:relative; top:20px; left:20px; " >b</div><div style= "Background:green" >C</div>

The black dashed portion of the image on the right is the default normal flow position for element B, while the yellow line represents the relative offset of element B. We can clearly see that the element C is still in place, and it does not change as the element B is offset.

Let's take a look at the inline element (here we use the most commonly used span to do the example)

<style type= "Text/css" >strong {background: #808080;} EM {background: #ffd800;} span {background: #b6ff00; position:relative; top:10px; left:10px; width:100px;} </style><strong>strong</strong><em>em</em><span>span</span>

Please note that here I have the assignment of the width property to span (100px). However, we can see that span has no effect on the Width property after using the position attribute value of relative, in other words,position:relative does not change the display property of the inline element. This concept is very important (note the difference from the next absolute).

Absolute

Commonly known as absolute positioning, absolute positioning is relative, how to understand it? elements that have position:absolute applied follow the parent (ancestor) element in the node tree to determine "root" and then offset it relative to the "root" element. If none of the parent (ancestor) elements in its node tree are set to the position property value of relative or absolute, the element will eventually be shifted to the body. elements that have position:absolute applied are detached from the normal stream in the page and change the display properties (emphasis)!

Let's start with a default nested div to do the example

<body style= "Background:yellow;" >    <div style= "background: #fff" >        A        <div style= "background: #81b6ff" >            A-1            < Div style= "background: #b6ff00;" >                A-2            </div>        </div>    </div></body>

Now we set absolute positioning (top:0, left:0) on the A-2 Div, without setting any position value on its parent (A, A-1)

<body style= "Background:yellow;" >    <div style= "background: #fff" >a        <div style= "background: #81b6ff" >a-1            <div style= "Background: #b6ff00; Position:absolute; top:0; left:0; " >                a-2</div></div></div></body>

As you can see (A-2) is ultimately based on the body to create a displacement, let us set the score of the parent element position.

From the above figure, we can summarize the following several conclusions.

1) The block element has a width of 100% in the case of position (relative/static), but after setting the Position:absolute, the width will be changed to auto (which will be affected by the parent element).

2) After the element is set to Position:absolute, if the top, bottom, left, and right properties are not set, the browser is set to auto by default, and the value of auto is the "default location" for that element. That is, the offsettop and Offsetleft property values before and after setting Position:absolute are unchanged.
Special cases:

• Firefox will directly set the top and left to the values of offsettop and offsetleft rather than auto.
• The performance under IE7 is more like a float, which is appended to the end of the parent element.

Some of the position little knowledge

1) The Position:relative/absolute element is applied, and the margin attribute is still valid, with position:relative as an example. If you set the left, top, bottom and right properties, we recommend that you do not set margin data, because it is difficult to pinpoint the location of elements, minimizing interference factors.

2) Position:absolute ignores the padding of the root element.

<div id= "A" style= "background: #fff; width:200px; " >a    <div id= "B" style= "background: #81b6ff; width:150px; position:relative; padding-top:100px;" >a-1        <div id= "C" style= "background: #b6ff00; position:absolute; left:0; top:0" >a-2        </div>
   </div></div>

3) Setting the Position property in Ie6/7 causes the Z-index property to be invalidated

<!--solution, the parent element sets a larger Z-index value to--><div style= "Z-INDEX:2;" >  a    <div style= "position:relative; z-index:1;" >      b    </div></div>

4) Inline elements change display after the Position:absolute is applied.

<span style= "Position:absolute; width:100px; height:100px; top:10px; left:10px; Background: #fff; " >        My display property is changed from inline to block</span>

Therefore, it is important to note that relative does not change the rendering mode of the inline elements, whereas absolute changes the rendering mode of the elements in the row, and if the absolute is set, it does not need to explicitly change the element display to block.

5) After applying position:absolute/relative, the other non-anchored elements (that is, position elements that are static) are overwritten, and if you do not want to overwrite the other elements, you can set the Z-index to 1.

Fixed

For a long time, this attribute value has not been widely applied because of compatibility issues (IE6 does not implement this property value). Fixed and absolute have a lot in common:

1. Changes the rendering mode of the element in the row, making the display change more block.
2. Causes the element to escape from the normal stream without occupying space.
3. The default is to overwrite the non-anchored element.

The biggest difference between fixed and absolute is that the "root element" of absolute can be set, while the fixed "root element" is pinned to the browser window. That is, when you scroll the page, the distance between its elements and the browser window is constant.

Float Property

The property values of float are none, left and right, with several points:

1. Only horizontal floats, and there is no vertical float.
2. When a float property is applied to an element, it is detached from the normal stream, and its container (parent) element will not have a child element height that is detached from the normal stream.
3. Changes the display property of the element to block.
4. The latter element of the floating element will be surrounded by floating elements (typically using text around a picture), and floating elements will not obscure the latter element when compared to the position element applied.
5. The previous element of the floating element will not be affected (if you want to have the two block top side displayed alongside each other, you must have two block elements applied to float).

compatibility issues with position

1) When the element is applied with the position:relative, float, (top/left/bottom/right) attribute, the element floats to the corresponding position, and then, based on the distance set (Top/left/bottom/right), Offset.

<div style= "position:relative; Float:right; left:50px; top:10px; " >div</div>

The div on the left is not set to the top, and the right is set to the 50px offset.

2) The Position:absolute and float properties are applied to the element, and float fails.

<div style= "Position:absolute; right:10px; top:10px; Float:left; " > I'm a div with Position:absolute and float:left applied, but I'm still on the right side of the browser, not floating to the left. </div>

3) The first element will be covered with the next float element after the position is applied (if the two elements are in the same position)

<div style= "Position:absolute; left:10px; top:10px; " >    I am a div with position:absolute applied. </div><div style= "Float:left; background:red; width:300px; height:150px; ">    I'm Float:left's div</div>.

Review: If you do not set the float element's position to relative, you want to reach the overwrite position:absolute by setting the float element's z-index to be invalid. Similarly, there is a position:absolute child element underneath the float element, and if you do not set the position of the float element to relative, the absolute element will not be positioned to the float element.

4) applying Position:absolute and float:left at the same time will cause the clear float to be invalid (position:relative can clear the float).
There are two common ways to clear floats:

1. By adding a label to the container, set the label style to Clear:both
2. Container Settings Overflow:hidden

<div style= "background: #fff; width:100%; Overflow:hidden; " >    <div style= "float:left; position:absolute;" > I am div</div>    <div style= "Clear:both;" ></div><div>

Finally, if you think this article is useful to you. Please help a bit of recommendation, thank you! ^_^

Some in-depth discussion of position and float properties in CSS