Specific analysis of the absolute attribute in CSS

Characteristics:

absoulte has the same characteristics as float : wrapping Sexual, and destructive
absoulte and float can be used interchangeably
are not affected by relative Restricted absoulte Positioning, behavioral performance can not be used left/right/top/button/auto Wait for attributes

Behavior

Detach from the document flow
Go to float (float and absoulte Elements cannot appear at the same time)
Position following (still at the original position)
Problem: IE7 uses absoulte elements It is always inline-block Element
Solution: An outer layer of tags without set attributes

can be accurately positioned with margin

Support negative value positioning
Strong compatibility with IE6
Strong adaptability, good maintainability, and robustness

Animation should be as effective as possible On an absolutely positioned element, multiple absoulte elements will overlap, and the latter will be on top

z-index No dependencies

If there is only one absoulte element, no need to set
If there are two absoulte elements, control the DOM flow Sequence, you don’t need
Multiple positioning staggered, z-index: 1 Control
Non-pop-up box typeabsoulte Element, z-index If redundant, it needs to be optimized

##left/right/top/bottom and width/height can be replaced by each other

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

absoulteOverall layout

<header></header><article>
   <aside></aside>
   <main></main></article><footer></footer>

1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

The above is the detailed content of Specific analysis of the absolute attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!