CSS positioning and cascade, CSS positioning and cascade

CSS positioning and cascade, CSS positioning and cascade
Position: static position when the position attribute is defined as static, the element can be defined as a static position. The so-called static position is the position podisition of each element in the HTML document stream. Therefore, if the position attribute is not defined, it does not indicate that the element does not have its own position. It will follow the default display as a static position. In the static location status, it cannot pass the coordinate value (top, left, right, bottom) to change its position. Position: absolute (absolute positioning) when the position attribute is defined as absolute, the element is separated from the document stream and is not affected by the document stream. It is located based on a reference object coordinate. when the top, right, bottom, and left positioning attributes are not displayed in the absolute positioning element, it is still not separated from the document stream and is influenced by the document stream. It has the characteristics of relative positioning, however, its position in the Document Stream does not exist. If the absolute positioning only shows the Positioning X axis or Y axis, it only has the positioning capability in this direction, and the other direction is still displayed as the relative positioning feature. Coordinate value: top: the distance from the top edge and outer wall of the positioning element to the top wall of the reference element. right: The distance left from the right outer wall of the positioning element to the right wall of the reference element: represents the distance from the left outer wall of the positioning element to the left wall of the reference element bottom: represents the distance from the bottom side of the positioning element to the bottom 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 large box is displayed in the center of 40px from the top of the page, but boxA is positioned as absolute position, which is separated from the large box and 100px from the top 100px on the left of the whole page, when an element is defined as absolute positioning, the position: relative can be precisely located based on its coordinate attributes (top, left, bottom, right) relative positioning is like a compromise. It is to strike a balance between static positioning and absolute positioning. The so-called relative positioning means that the elements to be applied are not separated from the document stream, but it can be offset by the coordinate value with the original position as the reference object. Coordinate value: top: the distance from the top edge and the outer wall of the positioning element to the top and the outer wall of the original position. right: The distance from the outer wall on the right of the positioning element to the left outer wall on the right of the element in the original position: specifies the distance from the left outer wall of the positioning element to the left outer wall of the original element. bottom: Specifies the distance from the bottom outer wall of the positioning element to the bottom wall of the original 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 large box is displayed in the center of 40px from the top of the page. When the element boxA is defined as relative positioning, It is offset relative to its position, the original position is 100px on the left and 100px on the top. When the document flow boxD is encountered, it overwrites boxD. Although the relative positioning deviates from the original position, the space occupied by its original position remains unchanged and is not occupied by other elements. Position: fixed (fixed positioning) fixed positioning is a special form of absolute positioning. It defines webpage elements using browser windows as a reference object. If a fixed element is defined, this element is not affected by the Document Stream. He always uses the browser window to locate his display position. No matter how the browser window is scrolled or how the browser window size changes, this element will be displayed in the browser window. In general, the four sides of the browser window are used as the coordinate system to locate the element position.

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 a fixed position, the box will always be in the browser window. The fixed attribute can also be controlled by left, right, top, and bottom to locate the box from different borders of the wandering device. Relative and absolute ):

<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>

If a box defines the position attribute as relative, only the boxA and boxB position attributes of its sub-elements are defined as absolute, the element boxC and boxD defined position as absolute and cannot be located relative to box. However, if the position attribute of boxB is defined as relative, the sub-elements boxC and boxD under it can be located relative to the parent element boxB. Therefore, the position attribute is defined as the element of relative, only its child element can be located relative to it, and its child element cannot be located relative to it. The combination of positioning and absolute positioning can control web page elements more accurately and design a more powerful layout effect.

Position attribute positioning tool: locate.

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 is at the top, boxB is at the center, and boxA is at the end. The larger the value of z-index, the higher the front.

I wrote a blog for the first time, but it was not well written. Please read the official comments.