css布局中使用绝对定位属性的技巧总结

terry 2年前 (2023-09-27) 阅读数 103 #数据结构与算法

2. Absolute

的特点在介绍absolute之前，有如下公共CSS代码：

/* CSS代码 */
.father{
    border: 2px solid deeppink;
    width: 200px;
}
.son {
    position: absolute;
    font-size: 0;
    border: 2px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

2.1 Wrapping

然后有如下html代码：

<div class="father">
    <!--son1与son的唯一区别是son1的position设置为static-->
    <div class="son1">
        <img /></div>
</div>
<br/><br/><div class="father">
    <div class="son">
        <img /></div>
</div>

最后效果如下图所示：

V 在这种情况下son1 和 son 之间的唯一区别是 son1 的位置设置为静态。 .father 元素的宽度设置为 200px，img 元素是 128px 宽的图像。这时，绝对定位元素的宽度就相当于一个“包装器”，它的宽度就是里面的图像。宽度为 128 像素。

由于绝对定位元素的宽度表现得像“环绕”，因此以下 CSS 表示法是多余的：

.wrap{
    display: inline-block;// 没有必要
    position: absolute;
}

2.2 高度折叠

根据上图，父 div 元素的高度不会从子元素（粉红色区域），这种效果称为“高塌陷”。高度塌陷的原因是浮动元素脱离了文档的正常流动，所以div.father认为自己没有子元素，所以发生了高度塌陷。

如果给.father添加子元素，如下：

<!--HTML代码-->
<div class="father">
    <div class="son">
        <img >
    </div>
    美女1，美女2，美女3，美女4，美女5
</div>

在浏览器中的效果如下：

图中可以明显看到文字叠加在了图像。这与float是一致的不同。由于悬停元素本身仍在文档流中，因此文本将围绕悬停元素并且不会被遮挡。然而，具有绝对字符串的图像元素具有层次关系，并且与文档的正常流程分离。从父级的角度来看，图像完全消失了，因此文本显示在最左边，并且绝对的级别较高，因此图像与文本重叠。

2.3 块化

块化是指当元素的位置属性为absolute或fixed时，其显示的计算值是块或表。可以将以下代码复制到浏览器控制台中：

var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素绝对定位
span.style.position = 'absolute'
console.log('2.' + window.getComputedStyle(span).display)
document.getElementById("aa").style.display = "block"

在浏览器控制台中的结果如下：

1.inline
2.block

2.4 小结

关于上面对absolute的介绍，相比于float属性，我们必须明白：他们是兄弟？人际关系呢？如果你一定要这样想，那么如果你了解绝对的特征就可以了。大多数前端开发者应该都明白这一点，但如果本文只呈现以上知识点，那就大大辜负了大家的期望！接下来，我们将介绍绝对值的流动性和相对性，这是本文的重点。？在 position:absolute、left/top/right/bottom 之后未设置，其所有前驱元素均为未定位元素。它将显示在哪里？

包括我，在深入理解absolute的特性之前，我都以为元素是显示在浏览器窗口的左上角。其实，这是对absolute的绝对定位属性的误解。因此，很多人在使用绝对定位属性时，首先要设置父元素position:relative，同时从绝对定位开始设置left/top/right/bottom元素甚至要设置绝对定位元素的级别z-index，实际上，元素仍然在当前位置。让我们看一下下面的例子：

<!--HTML代码-->
<div class="father">
    <div class="pa box"></div>
</div>

/* CSS代码 */
.father{
    border: 2px solid deeppink;
    width: 100px;
    height: 100px;
}
.pa{
    position: absolute;
}
.box{
    background-color: #cdcdcd;
    width: 50px;
    height: 50px;
}

如下图所示，元素.box仍然显示在当前位置，而不是显示在浏览器窗口的左上角：

在京东商城首页，效果是这样的：

然后我们打开调试窗口，看html和css代码如下：

top:0;left:0 css代码中的这里是完全多余的代码。你可以忽略它。因为没有设置 left/top/right/bottom 的绝对定位元素仍处于其当前位置，但超出了文档的正常流程。

其实absolute是一个相对独立的CSS属性。它的样式和行为可以在不依赖其他 CSS 属性的情况下完成。因此如果一个元素的定位属性设置为绝对定位，并且没有设置left/top/right/bottom，那么这个定位属性就可以称为“无依赖的绝对定位”，这就是本质“相对定位”，只是脱离了文档流，不占用CSS流的任何大小空间。

无依赖的绝对定位在实际开发中非常有用。以下是一些常用的示例。？小图标的放置可以使用left

和position:relative来解决。与使用位置：相对和右/上的布局方法相比，这种布局方法的优点：

维护成本低。如果以后想删除这个图片，只需要删除该图标对应的html和css代码即可。它不会影响其他元素。
高稳健性。如果图片变大或者文字变长，我们不需要改变小图标的css代码，定位效果仍然很好。

再举一个实际开发中经常用到的例子。如下图，文本段落前面有一个图标：

这种布局方式也可以使用无依赖定位的方式实现，代码简单高效，如下：

<div class="email-wrapper">
    <i class="icon-email"></i>
    <span class="icon-msg">请输入您的邮箱:</span>
</div>

.email-wrapper{
    display: inline-block;
    height: 20px;
    padding-left: 20px;
    /*font-size: 0;*/
}
.icon-email{
    position: absolute;
    margin-left: -20px;
    width: 20px;
    height: 20px;
    background: url("../../lib/img/email.png") center center no-repeat;
    background-size: contain;
}
.icon-msg{
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

2）验证错误

V 实际开发中我们有很多表单检查。当验证失败时，用户会看到如下所示的一些错误如下所示：

通常情况下，你可以将错误提示放在输入字段的下方，但是当错误提示出现时，下面的整个内容都会向下滚动。一旦错误提示消失，整个底部内容就会再次上移。用户体验不好。另一种方式是显示在输入字段的右侧，但默认情况下底部容器设置为水平居中且宽度不大。如果再次出现该错误信息，就会出现容器宽度不足的问题。目前，我们还可以使用：“无依赖定位”，直接在错误提示信息中添加 CSS 类，如下所示：

.msg-error{
    position: absolute;
    margin-left: 10px;
}

无论输入字段的宽度增大还是减小，提示信息都会跟随错误字段输入。与使用position:relative和right/top的布局方法相比，这种方法代码更少，容错能力更强，维护成本更低。

无依赖的绝对定位的应用有很多，这里就不一一介绍了。有兴趣的同学可以联系《CSS世界》张新旭老师。

3.2 绝对元素的流体特性

只有当绝对元素遇到属性左/上/右/下时，绝对元素才真正成为绝对放置元素。如果用户将左/右中至少一项设置为绝对，则水平方向的相对特征会丢失，但垂直方向的相对特征继续保留；如果用户至少指定 above/below 为绝对值。之一保留水平方向的相对特性，但失去垂直方向的相对特性。例如：

<div class='box'></div>
.box{
    position: absolute;
    right: 0;
}

此时，元素在水平方向的相对特征丢失，具有绝对定位特征，而垂直方向的定位仍保留相对特征。

以上面的例子为例。当只有 left 或 right 属性时，由于换行属性，div 的宽度为 0。但如果同时设置了left:0;right:0，则宽度显示为“格式化宽度”，宽度调整为.box，其中包含快速内容盒，改变Z，也就是说，如果包含该块的内容盒的宽度发生变化，则.box的宽度也会相应变化。例如：

<div class='box'></div>
.box{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

如果包含

<div class='box'></div>
.box{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.box

的块是根元素，上面的代码可以完全覆盖浏览器可视窗口中的.box元素。同时，如果调整浏览器窗口大小，.box的大小也会根据浏览器大小自动变化。因此，对于设置了相反定位属性的绝对定位属性，无论设置了padding还是margin，其占用的空间都保持不变，但内容字段发生了变化。这是典型的流体作用特征。稍后将介绍流体特性的具体应用。

4。绝对属性和其他属性

CSS 中的许多属性在与其他属性结合使用时会产生意想不到的效果。下面将介绍absolute与其他CSS一起使用的效果。

4.1绝对和文本对齐

使用text-align控制绝对定位元素的位置，实现右侧“返回顶部”、“反馈”等布局效果主窗口。效果如下：

基本代码如下：

<!--HTML代码-->
<div class="alignright">
    <span class="follow">
        <img /><img /></span>
</div>

/* CSS代码 */
.alignright{
    overflow: hidden;
    text-align: right;
}
.alignright:before{
    content: "\2002"
}
.follow{
    position: fixed;
    bottom: 100px;
    z-index: 1;
}
.follow img{
    display: block;
    margin: 10px;
    width: 20px;
    height: 20px;
    background-size: contain;
}

本例使用:before伪元素，在其前面插入一个空格（2002），然后设置text-alignin： right，则空间与主体结构的右边缘对齐。由于下一个固定定位元素（与绝对定位元素相同）的“独立定位”功能，左边缘正好是主体结构的右边缘，所以自然会显示在主体结构之外。这种布局在实际开发中非常有用。例如，该方法可用于实现在下图中特定宝藏的地板中导航的效果。

4.2绝对和剪裁

在实际开发过程中，我们经常会隐藏页面上的一些元素，以便更好的SEO和可访问性识别，比如在下面的代码中隐藏本网站的名称这些字：

/* CSS代码 */
<a href="#" class="logo">
    <h1>本网站名字</h1>
</a>

如果您想隐藏上面的文字，我们有以下几种选项可供选择：

使用 display:none或 visibility:hidden 。缺点：屏幕阅读器会忽略此文本；
用于缩进文本对齐。缺点：如果偏移量太大并超出屏幕，屏幕阅读器将无法读取；
使用颜色：透明。原生IE8浏览器不支持，但文本仍然可选。

借助absolute和clip（不熟练使用clip的同学可以自行百度搜索一下，很简单。注意：clip只适用于绝对定位和固定定位的元素），可以同时满足视觉隐藏和屏蔽的要求。对读取设备能够读取的要求，基本代码如下：

/* CSS代码 */
h1{
    position: absolute;
    clip: rect(0 0 0 0);
}

4.3 绝对极限：自动居中

在实际开发工作中，我们最多可能采用以下方法来达到的效果元素水平和垂直居中，基本代码如下：

/* CSS代码 */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -10px;
    margin-right: -10px;
}

这种方法的一个缺点是必须提前知道元素的大小，否则无法控制负边距的大小。

如果不知道元素的大小，可以使用变换：translate(-50%, -50%)代替负边沿值。但这种方法存在一定的兼容性问题，IE9(-ms -)仅支持IE10+等现代浏览器，这可能会导致微信在某些场景下崩溃。

在介绍第二种方法之前，我们先来熟悉一下填充规则margin: auto:

如果一侧固定，一侧自动，则剩余空间自动；
如果双方都是自动的，则剩余空间平分。

因此，利用绝对元素绝对定位的流体特性和边距自动分配特性：auto，可以达到水平和垂直居中的效果。基本代码如下：

/* CSS代码 */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

显示效果如下：

这种方法通用性很强。您需要提前知道元素的大小，这可以减少依赖性并为以后的维护和更改留下更少的空间。为什么不？