欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS关于绝对定位absolute的理解

程序员文章站 2022-05-27 09:19:34
...

1.absolute 元素将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。这个绝对定位需要稍微理解下，因为这里容易与 relative产生混淆。例如，当对 absolute 元素添加 left:10px定位后，这个left究竟是对哪个元素而言呢？其实，此时将会 往上查找absolute元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px元素具备不为static的position值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。（元素默认position属性为static）
2.当只给元素定义了position：absolute时，如果top, bottom, left, right都没有指定时，则left，top值与原文档流位置一致（当然了它是不占位的）。
3.示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
.div1 span{
    position: absolute;
    top:10px;
}
.div2 span{
    position: absolute;
}
.div3 span{
    position: absolute;
    left: 400px;
}
.div4 span{
    position: absolute;
    top:50px;
}

</style>
</head>

<body>
    
     <div class="div1" style="position: relative;width: 150px;height: 100px;background-color: cadetblue;">
        第一个div块
        <span>11</span>
        <span>22</span>
        <span>33</span>
    </div>
    <div class="div2" style="width: 150px;height: 100px;background-color:chocolate;">
        第二个div块
        <span>44</span>
        <span>55</span>
        <span>66</span>
    </div>
    <div class="div3" style="position: relative;width: 150px;background-color:darkgreen;">
        第三个div块
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="div4" style="width: 150px;height: 100px;background-color:chocolate;">
        第四个div块
        <span>444</span>
        <span>554</span>
        <span>666</span>
    </div>
</body>
</html>

CSS关于绝对定位absolute的理解

（1）第一个div块中span元素找到第一个父元素定位为relative，不为static，以此定位，但是没有设置left，只设置了top，按照top为10px，并放在普通文档流之后。但是其本身已经不占据任何空间，所以每一个span都会叠在上一个span的上面。
（2）第二个div块中span元素找不到父元素不为static定位，则以window进行定位，由于没有设置top,left，则直接按照普通文档流的位置放置。
（3）第三个div块中span元素找到第一个父元素定位为relative，则以其为定位。
（4）第三个div块中span元素以window定位。

相关标签： absolute positoon css html 定位

上一篇： 未来十年内，哪些行业的工作人员可能会被人工智能取代？

下一篇： 崇祯作为明朝最后一个皇帝 为什么在一天内杀死36位大臣呢

推荐阅读