绝对定位小结

1. 设置绝对定位后,元素会脱离标准文档流,其原来的位置会被别的元素替代

2. span标签被设置成绝对定位,就可以设置height和width属性,而且不占有原本的空间。

   另外,定位absolute的时候,如果top,right,left不设具体值而是默认或者auto的时候,该元素会在其未定位前,及最原来的标准文档流中的位置开始。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />

    <title>Document</title>
    <style>
        div{
            width: 600px;
            border: 1px solid red;
            position: relative;
        }
        span{
            position: absolute;
            top: 0;left: 1em;right: 1em;
width: 100px; height: 300px; margin: 0 auto; background-color: green; } </style> </head> <body> <div>dddddddddddddddddddddddddddddddddddddddd <span>我是span里的东西</span>ddddddddddddddddddddddddddd </div> </body> </html>

具体可以c参研《css权威指南》一书。

3. 设置绝对定位后,top:1em;right:2em;这里的top或者right边界,是以外边框来算的,及将margin包住的那个边框。这里设置的width依然是默认的content-box;

4. 还是上面那段代码,如果把外边距为auto去掉,结果会怎样?

  结果是浏览器代理会忽略掉right的值。这是对从左往右的语言来说。如果是从右往左,用户代理(浏览器)会忽略left;

  即过度受限的情况下,忽略right值。

5. 如果一边的外边距为auto,另一边有值,则重新计算auto这边的外边距。

6.
   

7. 绝对定位元素的垂直居中,同水平居中,设置好定位后,注意top,left,right,bottom都要有,再给margin个auto 0,就可以垂直居中了。绝对定位后的元素可以设置宽高哦。

8. 在水平布局中,如果值设置为auto,right或left都可以根据其静态位置放置。但在垂直布局上,只有top可以取静态位置。bottom做不到。也许是按照标准文档的顺序来看吧,书上没给出解释。

9. 如果一个绝对定位元素的大小在垂直方向上过度受限,那么将忽略其bottom,以height为重点布局。

原文地址:https://www.cnblogs.com/nostic/p/5739916.html