CSS positioning and cascading_html/css_WEB-ITnose

position: static (static positioning)

When the position attribute is defined as static, the element can be defined as a static position. The so-called static position is where each element should be in the HTML document flow. Some locations

podisition positioning issues. Therefore, when the position attribute is not defined, it does not mean that the element does not have its own position. It will follow the default display as a static position. In the static positioning state, its position cannot be changed through the coordinate values ​​​​(top, left, right, bottom). .

position: absolute (absolute positioning)

When the position attribute is defined as absolute, the element will be separated from the document flow and will not be affected by the document flow at all. It will be positioned according to the coordinates of a certain reference object. position. When the absolutely positioned element does not explicitly specify the top, right, bottom, and left positioning attributes, it is still not out of the document flow and is affected by the document flow. It has the characteristics of relative positioning, but its position in the document flow The location no longer exists. If absolute positioning only displays the positioning x-axis or Y-axis, then it only has the positioning capability in this direction, and the other direction still displays the relative positioning feature.

Coordinate value:

top: Indicates the distance from the top outer wall of the positioning element to the top inner wall of the reference element

right: Indicates the distance from the right outer wall of the positioning element to the right side of the reference element The distance of the inner wall

left: represents the distance from the left outer wall of the positioning element to the left inner wall of the reference element

bottom: represents the distance from the bottom outer wall of the positioning element to the bottom inner wall of the reference element

<div id="box">box                                                            <div id="boxA">boxA</div>    <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:absolute; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}

The big box box is centered 40px from the top in the entire web page, but boxA is positioned absolute due to position Positioning, it is out of the big box, 100px from the left and 100px from the top of the entire web page. When the element is defined as absolute positioning, its position can be accurately positioned by combining its coordinate attributes (top, left, bottom, right)

position: relative (relative positioning)

Relative positioning is like a compromise method, which is to find a balance between static positioning and absolute positioning. The so-called relative positioning is to keep the applied elements from the document flow. , but can be offset using the original position as a reference through the coordinate value.

Coordinate value:

top: represents the distance from the top outer wall of the positioned element to the top outer wall of the original position

right: represents the distance from the right outer wall of the positioned element to the original position element The distance from the right outer wall

left: represents the distance from the left outer wall of the positioned element to the left outer wall of the original position element

bottom: represents the distance from the bottom outer wall of the positioned element to the bottom outer wall of the original position element

1 <div id="box">2      <div id="boxA">boxA</div>3      <div id="boxB">boxB4       <div id="boxC">boxC</div>5       <div id="boxD">boxD</div>6         </div>7     </div>

#box{ margin:40px auto; width:400px; height:400px; border:2px red solid;}#boxA{ position:relative; top:100px; left:100px; width:50px; height:50px; background: #3E7DB0;}#boxB{ width:50px; height:150px; background: #B9C8C5;}#boxC{ width:50px; height:50px; background: #1D92C8;}#boxD{ width:400px; height:50px; background: #086499;}

The big box box is centered 40px from the top in the entire web page. When the element boxA is positioned Defined as relative positioning, it is offset relative to its own position. According to the original position, it is 100px left and 100px top. When it encounters document flow boxD, it will cover boxD. Although relative positioning deviates from the original position, the space occupied by its original position is still retained and is not occupied by other elements.

position: fixed (fixed positioning)

Fixed positioning is a special form of absolute positioning. It uses the browser window as a reference to define web page elements. If you define an element to be fixed is displayed, the element is no longer affected by the document flow. He always uses the browser window to position the display position of his display. No matter how the browser window scrolls or the size of the browser window changes, the element will be displayed in the browser window. In layman's terms, the four sides of the browser window are used as the coordinate system to position the element.

1 <div id="box">box </div> 2 <div id="fixed">fixed</div>

 1 #box{ 2  margin:40px auto; 3  width:400px; 4  height:400px; 5  border:2px red solid; 6  position:fixed; 7 left:100px; 8 top:100px;  9 }10 #fixed{11  height:4000px;12 }

When the box is defined as fixed positioning, the box will always be within the browser window, fixed The properties can also be used to control the positioning of different borders from the wanderer through left, right, top, and bottom.

Relative and absolute positioning:

<div id="box">box  <div id="boxA">boxA</div>  <div id="boxB">boxB   <div id="boxC">boxC</div>   <div id="boxD">boxD</div>  </div> </div>

如果box把 position属性定义为relative，只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位，而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative，它底下的子元素boxC和boxD就能相对于父元素boxB来定位，所以，把position属性定义为relative的元素，只有它的子元素才能相对它定位，孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素，设计出更强大的布局效果。

position属性定位小工具： www.linxz.de/css_tool/position_demo.html

层叠：

css可以通过 z-index 属性来排列不同定位元素之间的层叠顺序，该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。

1  <div id="box">box2   <div id="boxA">boxA</div>3   <div id="boxB">boxB</div>4   <div id="boxC">boxC</div>5  </div>

 1 #boxA,#boxB,#boxC{ 2  width:100px; 3  height:200px; 4  position:absolute; 5 } 6 #boxA{ 7  background: #086499; 8  z-index:1; 9  left:100px;10 }11 #boxB{12  top:50px;13  left:50px;14  background: #B9C8C5;15  z-index:2;16 }17 #boxC{18  top:100px;19  background: #1D92C8;20  z-index:3;21 }

boxC排在最上面，boxB在最中间，boxA在最后。z-index的值越大越靠前。

第一次写博客，写的不好，请各位看官多多指正。