问答详情
源自：13-6 万事无绝对 -层模型之绝对定位

adsolute生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。

这句话要怎么理解

 下面这段代码 相对于浏览器窗口进行定位 没有设置top leaf属性  p标签位置发生了变化 而a标签没被覆盖 

<html>

<style>

p{position:absolute;}

</style>

<body>

<a href=“#”>skskdfja</a>

<p>这是段落。</p>

<p>这是段落。</p>

<p>这是段落。</p>


<p>段落元素由 p 标签定义。</p> 


</body>

</html>


提问者：清风流光 2017-03-30 18:14

个回答

  • magic_4
    2017-03-30 19:02:50

    在没有设置绝对定位时 多个<p>标签的内容是分段落显示 这也正是<p>标签的功能

    而设置绝对定位后 ，会把元素从文档流拖出来，独立出来，然后使用left right top bottom属性相对于最接近的一个有定位属性的父包含快进行绝对定位，不存在就相当于body 浏览器窗口。而默认的p标签是有上下margin的, 而对四个p标签绝对定位的时候, top和bottom是以p标签margin box的边缘为准的, 其父元素(.parent)的padding box上下边缘直接接触的是p的margin box的边缘.所以会造成四个P重叠（就是这四个p都脱离了文档流，然后设置样式相同 就会重叠）http://img.mukewang.com/58dce3d00001e26e02220148.jpg

    而<a>元素你没有设置它的样式 默认是static 




    1
  • GrandPenguin
    2017-03-30 18:40:20

    style里面定义的是p标签，对a标签并没有加css样式

    所以在body标签里面，绝对定位只对<p></p>里面内容生效


    0