CSS使用绝对定位absolute对Html元素布局的实案

最新推荐文章于 2023-08-30 20:03:26 发布

Sin_lion

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量1.7k

点赞数 3

分类专栏：前端那些事文章标签： absolute 网页 html div position

本文链接：https://blog.csdn.net/qq_18947751/article/details/100176924

版权

前端那些事专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在之前一篇文章已经详细的介绍了相对定位relative，有了相对就有绝对，今天详细的研究下绝对定位absolute，这也是在html布局的时候使用频率最高的几个css属性。
对于相对定位，配合top、left等属性，是以父元素为参考进行的定位偏移的，那么绝对定位又是如何定义的呢？
首先建立一个基本的布局模型，一个父元素拥有三个子元素的结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>absolute</title>
</head>
<body>
    <style>
        .father{
            border: red 2px solid;
            background:#aafaaa;
            margin-top: 30px;
            padding: 30px;
        }
        .father>div{
            border: blue 2px dotted;
            background: #eee;
            padding: 5px;
        }
    </style>

    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>
</html>

三个子元素以标准流的形式垂直排列，预览如下
在这里插入图片描述
【A】使用绝对定位
对子son2增加一个样式设置进行绝对定位

.son2{
            position: absolute;
            top:0px;
            right: 0px;
        }

在这里插入图片描述
从上面图中可以看出，子元素二施加绝对定位以后，是以浏览器窗口为参考进行定位的，此时它已经脱离了标准流，son3取代了它的位置近贴son1，就好像son2不存在一样。
我们把偏移距离改大一点看一下：

.son2{
            position: absolute;
            top:15px;
            right: 15px;
        }

在这里插入图片描述
可以看出已经向左和向下各移动了15像素。
是不是绝对定位就是以浏览器为参考进行定位呢？事实上并不是，下面对父元素加一个相对定位看一下。

.father{
            border: red 2px solid;
            background:#aafaaa;
            margin-top: 30px;
            padding: 30px;
            position: relative;
        }

在这里插入图片描述
现在可以看出是son2以父元素father为参考偏移了15像素，参考的基准不再是浏览器窗口了。

【B】总结绝对定位
按照CSS文档的描述，绝对定位的标准是这样的：

使用绝对定位的盒子会以离他最近的拥有定位属性的祖先元素为基准，如果祖先元素都没有定位属性则以浏览器窗口为基准
绝对定位的盒子会脱离标准流，对其兄弟元素的定位没有影响，在标准流中就像它不存在一样

有那么几点解释一下，有些内容翻译过来不是太直观。所谓拥有定位属性，是指已经设定position属性，并且参数不能是static。
何为祖先元素？不清楚的话可以去之前的文章了解下dom树的概念，一个元素节点，往根节点走，经过的所有节点都是它的祖先元素。
“最近”就是指拥有定位属性的祖先元素，父元素比祖父近，祖父比曾祖父近等等，最远的就是body。

在上面两个示例中可以看出，父元素没有定位前，没有符合已经定位的祖先元素，son2就是以浏览器为基准进行定位。后来father设定了position后，就是以父元素为参考了。

【C】浏览器BUG
对于任何程序和应用，不可能做到尽善尽美，有bug在所难免，特别是浏览器，需要遵循多种标准和规范，况且相当大一部分规范并没有统一的解释，因此在css方面各家浏览器也有着或多或少的bug。在IE5.5和IE6中，对绝对定位的支持都有bug，如果你的网站还有那么几个使用“上古”浏览器的用户，可以考虑下兼容性的问题，相关解决方法可以在网上搜索，并不是太复杂。
这也提醒了我们，任何时候，用户都可能面临着网页布局失控的场面，当意外发生的时候，如何得到反馈和修复，也是前端工作中需要充分考虑的。

【D】绝对定位的特殊之处
下面是只有一父一子的盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>absolute1</title>
</head>
<body>
    <style>
        .father{
            border: red 2px solid;
            background:#aafaaa;
            margin: 30px auto;
            width: 200px;
            height: 70px;
        }
        .son{
            border: blue 2px dotted;
            background: #eee;
            padding: 5px;
            width: 40px;
            height: 30px;
            position: absolute;
            top:70px;
        }
    </style>

    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

在这里插入图片描述
外面的盒子没有设置position，里面的盒子设置了绝对定位，但是只有竖直方向设置了偏移，水平方没有设置，这时怎么定位呢？从上面的图中可以看到，因为里面的son设置了绝对属性，而外面的父元素没有设置position，此时是以浏览器为基准的，由于top参数给了70px，所以此时son的上边界距离浏览器顶部70像素，但是水平方向没有设置偏移，所以水平方向还是原来的位置，与父元素的左侧对齐。
由此可以得出，设置了绝对属性但是没有给定偏移的情况下，元素还是保持在原来的位置。这样的操作可以使得盒子脱离标准流后仍然保持在原来的位置，同时还让出了它的位置给兄弟元素，在网页布局中适当的利用这种特殊的方法或得一些独特的图文展示效果。

Sin_lion

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS使用绝对定位absolute对Html元素布局的实案

在之前一篇文章已经详细的介绍了相对定位relative，有了相对就有绝对，今天详细的研究下绝对定位absolute，这也是在html布局的时候使用频率最高的几个css属性。对于相对定位，配合top、left等属性，是以父元素为参考进行的定位偏移的，那么绝对定位又是如何定义的呢？首先建立一个基本的布局模型，一个父元素拥有三个子元素的结构：<!DOCTYPE html><ht...
复制链接

扫一扫