当前位置：首页 > Web前端 > HTML5

【前端Talking】CSS系列-CSS绝对定位深入理解

时间：2023-04-04 22:44:44 HTML5

1.上一篇会介绍的absolute定位absolute属性和前面介绍的CSS系列-float浮动在CSS中有些类似-深入理解两者可以说是亲兄弟，都具有“封装”、“高塌”、“块状”的特点，在很多场合可以相互替代。很多人可能会有这样的疑问：一个属性名为“position”，另一个属性名为“float”。从名字上看，它们似乎完全无关。为什么他们还是兄弟？position:absolute和position:relative说是兄妹还可以理解，说是和float是兄妹我就纳闷了！！！呵呵~~~~，别着急，这就是写这篇文章的目的。2、absolute的特点在介绍absolute之前，有以下常用的CSS代码：/*CSScode*/.father{border:2pxsoliddeeppink;宽度：200px;}.son{位置：绝对;字体大小：0；边框：2px纯蓝色；padding:5px;}.fatherimg{width:128px;}2.1wrapping然后有如下html代码：

最终显示效果如下图所示：本例中，son1和son的唯一区别是son1的位置设置为static。.father元素的宽度设置为200px，img元素为一张图片，宽度为128px。这时候绝对定位元素的宽度就被“包裹”起来了，它的宽度就是里面图片的128px。由于绝对定位元素的宽度是“wrapped”，所以下面的CSS写法是多余的：.wrap{display:inline-block;//isnotnecessaryposition:absolute;}2.2高度塌陷基于上图，parent元素div的高度没有被子元素拉伸（粉色区域），这种效果可以称为“高度塌陷”。高度塌陷的原因是因为浮动元素脱离了正常的文档流，div.father认为它没有子元素，所以出现了高度塌陷。如果给.father元素添加子元素，如下：Beauty1,Beauty2,Beauty3,Beauty4,Beauty5，在浏览器中的效果如下：从图中可以明显看出文字被图片覆盖了，这个和float有点区别。因为float元素本身还在文档流中，文字会围绕在float元素周围，不会被遮挡，而设置absolute的picture元素是有层级关系的，已经脱离了正常的文档流。从父元素来看，图片已经完全消失了，所以文字从最左边开始显示，absolute的级别很高，所以图片盖住了文字。2.3阻塞阻塞是指一旦元素的position属性为absolute或fixed，其显示计算值为block或table。您可以将以下代码复制到浏览器控制台：varspan=document.createElement('span')document.body.appendChild(span)console.log('1.'+window.getComputedStyle(span).display)//setting元素绝对定位span.style.position='absolute'console.log('2.'+window.getComputedStyle(span).display)document.getElementById("aa").style.display="block"in浏览器在控制台的结果如下：1.inline2.block2.4小结关于上面介绍的absolute，和float属性相比，应该明白他们是兄弟了吧？如果你非要有别的想法，你可以，只要你了解absolute的特性。大部分前端开发者应该都懂，但是如果本文只是介绍以上知识点，实在是太对不起大家的期待了！下面将介绍绝对的流体和相关特性，这是本文的重点。3、绝对流体和相对特性3.1absolute的相对特性在介绍absolute的相对特性之前，首先提出以下问题：如果一个元素的定位属性设置为：position:absolute,left/top/right/bottom是没有设置，它的祖先元素都是非定位元素，它会显示在哪里？包括我自己，在了解absolute的特性之前，我以为元素是显示在浏览器窗口的左上角。其实这是对绝对定位属性的错误理解。所以很多人在使用绝对定位属性的时候，首先要设置父元素position:relative，同时设置绝对定位元素的left/top/right/bottom，甚至还要设置的z-index绝对定位元素级别。事实上，元素仍处于当前位置。我们拿下面的例子来验证一下：/*CSS代码*/.father{边框：2px纯深粉色；宽度：100px；height:100px;}.pa{position:absolute;}.box{background-color:#cdcdcd;宽度：50px；height:50px;}如下图，.box元素仍然显示在当前位置，而不是在浏览器窗口的左上角：在京东商城首页，有这样一个效果：然后我们打开调试窗口查看html和css代码如下：css代码中的top:0;left:0完全是多余的代码，可以省略。因为，没有设置left/top/right/bottom的绝对定位元素还在当前位置，只是脱离了正常的文档流。实际上，absolute是一个相对独立的CSS属性，它的样式和行为可以不依赖其他CSS属性来完成。因此，如果一个元素的定位属性设置为absolute绝对定位，并且没有设置left/top/right/bottom，那么这个定位属性就可以称为“无依赖的绝对定位”，本质上就是“相对定位”，而它的特点只是脱离文档流，不占用CSS流的任何大小空间。没有依赖的绝对定位在实际开发中非常有用。下面是一些更常用的例子。1）定位各种图标我们以慕课首页的课程列表为例：

Hot核心CSS代码如下提示：不用top/right/bottom/left和position:relative也可以得到小图标的布局。与使用position:relative和right/top的布局方式相比，这种布局方式的优势在于：维护成本低。如果后面要删除这张图片，只需要删除图标对应的html和css代码即可，不会影响其他元素的健壮性。如果图片变大或者文字变长，我们不需要修改小图标的css代码，定位效果还是不错的。再举一个实际开发中经常用到的例子。如下图，一段文字前面有一个图标：这种布局方式也可以借助独立定位来实现，代码简洁高效。代码如下显示：

请输入您的邮箱：.email-wrapper{显示：内联块；高度：20px；左填充：20px；/*font-size:0;*/}.icon-email{position:absolute;左边距：-20px；宽度：20px；高度：20px；背景：url("../../lib/img/email.png")中心中心不重复；背景大小：包含；}.icon-msg{显示：内联块；行高：20px；vertical-align:top;}2)验证提示错误在实际开发中，我们有很多表单验证，当验证失败时，会有一些错误提示给用户，如下图注：通常情况下，错误信息可以放在输入框下面，但是出现错误信息时，下面的内容会整体下移，当错误信息消失时，下面的内容会整体上移，不太好用经验。另一种方式是显示在输入框的右侧，但默认状态下，下方容器设置为水平居中，宽度不大。如果再次报错，容器的宽度就不够了。此时，我们也可以借助“无依赖定位”，直接在错误信息中添加一个CSS类，如下：margin-left:10px;}无论输入框的宽度变大或变小，提示信息都会跟随输入框。与使用position:relative和right/top的布局方式相比，这种方式代码更少，容错性更高，维护成本更低。独立绝对定位的应用很多，这里就不一一介绍了。有兴趣的同学可以参考张新旭老师的《CSS世界》。3.2absolute的流动性特点absolute只有满足left/top/right/bottom属性，absolute元素才能真正成为绝对定位元素。如果用户为absolute指定left/right至少其中之一，则水平方向的相对属性丢失，垂直方向的相对属性继续保持；如果用户指定top/bottom至少其中之一为absolute，水平方向的relative属性仍然是Relative属性，垂直方向的relative属性丢失。例如：.box{position:absolute;right:0;}这时候元素在水平方向上的相对特性就丢失了，具有绝对定位的特性，而在垂直方向上的定位仍然保持着相对特性。以上面的例子为例，当只有left或right属性时，div的宽度因wrapping而为0。但是如果同时设置了left:0;right:0，则宽度显示为“格式化宽度”，宽度自适应包含fastcontent-box的content-box。也就是说，如果包含fast的content-box宽度发生变化，.box的宽度也会随之变化。例如：.box{position:absolute;右：0；左：0；顶部：0；bottom:0;}如果.box的包含块是根元素，那么上面的代码可以让.box元素完全覆盖浏览器的可见窗口。同时，如果浏览器窗口的大小发生变化，.box的大小也会随着浏览器的大小自动变化。因此，对于设置了相反定位属性的绝对定位属性，无论设置padding还是margin，其占用的空间都是不变的，变化的是content-box，这是典型的流体表现特征。流体属性的具体用法后面会介绍。4.absolute和其他属性当CSS中的很多属性需要和其他属性一起使用时，会出现意想不到的效果。下面将介绍与其他CSS一起使用absolute的效果。4.1absolute和text-align使用text-align来控制绝对定位元素的位置，实现主窗口右侧“返回顶部”、“反馈”等布局效果。效果图如下：核心代码如下：/*CSS代码*/.alignright{overflow:hidden;文本对齐：右；}.alignright:before{content:"\2002"}.follow{position:fixed;底部：100px；z-index:1;}.followimg{display:block;边距：10px；宽度：20px；高度：20px；background-size:contain;}本例中使用:before伪元素在其前面插入一个空格(2002)，然后设置text-align:right，则空格将对齐到主结构，后面的文字会是固定的定位元素（同绝对定位元素），由于“非依赖定位”的特性，左边缘恰好是主结构的右边缘，自然会去主要结构外用于展示。这种布局在实际开发中非常有用。比如下图中某宝的楼层导航效果就可以通过这种方式实现。4.2absolute和clip在实际开发过程中，为了更好的SEO和无障碍识别，我们经常会在页面上隐藏一些元素，比如在下面的代码中隐藏网站名称的字样：/*CSS代码*/

这个网站的名字

为了隐藏上面的文字，有几个选项供我们选择：使用display:none或者visibility:hidden。缺点：屏幕阅读器忽略文本；使用text-align进行缩进。缺点：如果缩进量太大，超出屏幕，屏幕阅读器将无法阅读；使用颜色：透明。原生IE8浏览器不支持，文字依然可以选中。借助absolute和clip（不熟悉clip用法的同学可以百度下载，很简单，注意：clip只对绝对定位和固定定位的元素有效），既可以满足视觉隐藏和屏幕阅读设备。阅读需求，核心代码如下：/*CSS代码*/h1{position:absolute;clip:rect(0000);}4.3marginofabsolute:autocentered在实际工作开发中，我们可能用得最多的是下面的方法来实现元素的水平和垂直居中效果。核心代码如下：/*CSS代码*/.box{width:20px;高度：20px；位置：绝对；左：50%；右：50%；边距-left:-10px;margin-right:-10px;}这种方法的一个缺点是需要事先知道元素的大小，否则无法控制margin负值的大小。如果不知道元素的大小，可以使用transform:translate(-50%,-50%)代替负边距值，但是这种方法有一定的兼容性问题，IE9(-ms-),IE10+而其他现代浏览器只是支持，在某些场景下，会造成微信闪退的问题。在介绍另一种方法之前，我们先来熟悉一下margin的填充规则：auto：如果一边是固定的，一边是auto，那么auto就是剩余空间的大小；如果两边都是auto，剩余的空间平分。因此，利用absolute定位absolute元素的流体特性和margin:auto的自动分配特性，可以实现水平和垂直居中的效果。核心代码如下：/*CSS代码*/.box{width:20px;高度：20px；位置：绝对；左：0；右：0；顶部：0；底部：0；margin:auto;}显示效果如下：这种方法用途广泛，需要提前知道元素的大小，减少了依赖，后期维护的变化也更少，何乐而不为呢？5.结束语absolute的介绍到此结束。平时要多思考，多总结，才能获得新的经验。下一篇准备介绍相对定位。最新文章会第一时间更新在我的<前端Talking>中。欢迎关注。以上就是本文的全部内容，感谢您的阅读，如有不妥之处，欢迎留言指正！6.参考张新旭《CSS世界》认识的，不妨关注我的微信公众号“前端Talking”

上一篇：Python爬虫详解-BeautifulSoup库

下一篇：gMISi18n多语言国际化更新

【前端Talking】CSS系列-CSS绝对定位深入理解相关文章

最新推荐

猜你喜欢