在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。
1.absolute的流体特性
在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工作，absolute还需要left，top，right，bottom四个属性的配合，通常，我们会根据阅读顺序(从左到右，从上到下)的需要，设置absolute元素的left和top值，来达到元素定位的效果，那么，如果仅设置一个方向上的值，会发生什么呢？这里我们不深入探讨这种情形，你只需要知道元素在被设置的方向上保持“绝对定位”的特性，而在另一个（水平或垂直）方向上保持相对定位特性即可。
本节要深入探讨的是absolute的流体特性。说到流体特性，我们应该能很快想到<div>之类的普通块级元素，实际上，绝对定位元素也具有类似的流体特性，而且在某些情况下比普通块级元素更强大！当然，absolute要实现自身的流体特性是有条件的，给元素直接设置style=”position:absolute;margin:auto;”外边距的auto属性是不会有任何计算值的。那么，absolute元素才能拥有流体特性呢？这个条件就是“对立方向同时发生定位”的时候。
left，top，right，bottom是具有定位元素的专用CSS（注意不只是绝对定位），其中left和right属于水平对立定位方向，而top和bottom属于垂直对立定位方向。当一个绝对定位元素，其对立定位方向属性同时具有值得时候，那么该元素在该对立方向上具有流体特性，当然如果你乐意的话，绝对定位元素可以同时在水平和垂直方向上都具有流体特性。流体特性最显著的特点就是自动铺满流体方向上的空间，就像物理世界的水会铺满烧杯一样。下面我们来测试一下该特性的具体表现。
<!-- 绝对定位的流体特性 -->
<div style="position:relative;height: 100px;background: yellow;margin: 20px;">
<div style="position: absolute;background: #f34413;left: 0;right: 0">我是水平流</div>
</div>
<div style="position:relative;height: 100px;background: yellow;margin: 20px;">
<div style="position: absolute;background: #f34413;top: 0;bottom: 0">我是垂直流</div>
</div>
<div style="position:relative;height: 100px;background: yellow;margin: 20px;">
<div style="position: absolute;background: #f34413;left: 10px;right:10px;top: 10px;bottom: 10px">
我是水平垂直流</div>
</div>
如果只有left属性没有right属性，absolute则表现为“包裹性”。在垂直方向上的表现同理。
<div style="position:relative;height: 100px;background: yellow;margin: 20px;">
<div style="position: absolute;background: #f34413;left: 0;">包裹性</div>
</div> 
下面我们要实现一个元素完全覆盖浏览器可视窗口的效果，有很多种方法可以实现这个效果，下面我们只关注用absolute如何实现这种效果。
<style>
.box1{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<style>
.box1{
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
}
</style>上面这两种方法都可以实现元素铺满整个屏幕的效果（在包含块是HTML的情况下），但是他们的实现原理却完全不同，后者也就是设定了宽高的那个元素，实际上已经完全失去了流动性，而且当前元素的宽高已经被准确计算了，此时你还想要添加内边距或外边距便会造成“宽高溢出”的表现，而用第一种方法实现则完全不会出现这种情况。
2.利用absolute实现水平垂直居中
我们可以利用absolute的流体特性实现一种常用的布局——水平垂直居中。我们都知道，块级元素本身具有流体特性，在margin一章中我们也详细介绍了margin:auto的自适应计算属性。当元素具有流体特性，如div在水平方向上具有流体特性，此时设置margin:auto，该元素的外边距就会在水平方向上自动等分成两份，使得元素本身在父容器中显示为水平居中效果。因此，margin的auto属性用在具有垂直水平都具有流体特性的absolute元素上时，就能让元素实现自适应居中！这种居中方式是目前为止最好的水平垂直居中解决方案，来看下面的演示。
<!-- absolute流体特性 -->
<div class="father">
<div class="son"></div>
</div>
<style type="text/css">
.father{
width: 400px;
height: 400px;
background: yellow;
position: relative;
}
.son{
width: 200px;
height: 100px;
background: green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
事实上absolute还有一种做法也可以实现元素的水平垂直居中，这种做法需要借助transform配合，我们先来看一下演示。
<!-- 利用transfor实现 -->
<div class="father">
<div class="son"></div>
</div>
<style type="text/css">
.father{
width: 400px;
height: 400px;
background: yellow;
position: relative;
}
.son{
width: 200px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>由于最终展示的结果是一样的，这里就不放图片了，看起来下面的这种做法也非常优秀，但其实还是有一些问题的。之前我在探讨元素的垂直居中的时候就发现了这种方法的一些“缺点”。首先，他没有利用元素自适应布局的特点，也就是元素完全脱离了文档流，这可能对CSS强迫症爱好者来说有些不爽。当然这只是一个小缺点，此类布局最大的问题就是要考虑absolute的包裹性！我刚才已经提到了absolute元素如果只有left属性没有right属性，absolute则表现为“包裹性”。在垂直方向上的表现同理。因此在本例中，该元素表现出了包裹性，包裹性包括包裹和自适应两大特性，这个我也说了好多遍了，由于设置了left:50%，因此son元素的自适应最大宽度不得超过50%，也就是明明还有可适应的空间，他却自动换行了。我们可以在son中填充一些文字看一下效果。
要解决这个问题很简单，只要给absolute元素加上white-space:norwap强制文字不换行即可，但这样也会有问题，就是文字内容会超出父容器，因此个人建议弃用这种垂直居中的布局方式。
3.absolute与text-align
众所周知，text-align从字面上理解是指文本的对齐方式，因此控制的是内联元素的表现，而absolute具有块状化元素的特性，因此这两个属性可以说是八杆子打不着的关系。然而在下面这段代码中，text-align属性似乎对absolute元素产生了影响。
<!-- absolute与text-align -->
<div style="text-align: center;">
<span style="position: absolute;">hello</span>
</div> 
上图中，absolute元素似乎受到text-align的影响处于容器中偏右的位置，那么text-align真的可以影响块元素吗？答案是否定的。在本例中，text-align影响的依旧是内联元素，只是这个内联元素是你看不到“幽灵空白节点”。由于span标签原来是个内联元素，因此在该元素前面生成了一个幽灵空白节点，这个节点默认是个内联元素，受到了text-align:center的感化，跑到了div的中间，虽然不占位置，但占据了一个看不见的空间，而这个看不见的空间对后面的“无依赖绝对定位”元素产生了影响，这个absolute元素就乖乖的跟在后边了。因此本例中，absolute元素并不是直接和text-align发生关系！
4.absolute和overflow
overflow对absolute元素的裁切规则的官方描述是：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候。
翻译一下上面这句话：如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行裁切。事实上你根本记不住这句话，所以你得常用，慢慢记到脑子里。下面我会用一些实例来强化一下你的印象，从0% 到 1%吧，剩下99%靠你自己了，我写博客也是为了加深印象，这个系列的内容很多都只要留个潜意识即可，以后遇到问题知道去哪里查阅就ok了。
下面四个例子可以帮助你快速记忆absolute什么时候会被overflow裁切。
<!-- absolute与overflow -->
<!-- html作为定位元素 -->
<div class="box">
<img src="./小和尚.jpg" />
</div>
<!-- overflow父元素是定位元素,跟html做定位元素同理 -->
<div style="position: relative;">
<div class="box">
<img src="./小和尚.jpg" />
</div>
</div>
<!-- overflow元素本身是定位元素 -->
<div class="box" style="position: relative;">
<img src="./小和尚.jpg" />
</div>
<!-- overflow元素与绝对定位元素之间有定位元素 -->
<div class="box" style="position: relative;">
<div style="position: relative;">
<img src="./小和尚.jpg" />
</div>
</div>
<style>
.box{
width: 80px;
height: 120px;
overflow: hidden;
background: yellow;
margin: 10px;
}
img{
position: absolute;
width: 100px;
height: 100px;
}
</style> 
除了hidden”裁切”属性，overflow还有auto和scroll属性，这两个属性在遇到绝对定位的时候选择直接无视，即使绝对定位元素宽高大于overflow元素，也不会出现滚动条。
<!-- absolute与滚动条 -->
<div class="box">
<img style="position: absolute;" src="./小和尚.jpg" />
</div>
<style>
.box{
width: 300px;
height: 200px;
overflow: auto;
background: yellow;
}
</style>
虽然绝对定位元素不能影响元素出现滚动条，但普通元素可以，在box元素中填充足够内容后，我们来看下滚动条和absolute元素的真实关系。
<!-- absolute与滚动条 -->
<div class="box">
<img style="position: absolute;opacity: 0.2" src="./小和尚.jpg" />
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
</div>
<style>
.box{
width: 300px;
height: 200px;
overflow: auto;
background: yellow;
}
</style>
可以看到，滚动条滚动的过程中，absolute元素纹丝不动，利用这个特点我们可以用来实现元素固定到顶部的效果，且该元素不会随着滚动条滚动。本人测试了一下该原理实现的效果并不是很好，且鉴于小白维护代码的时候会莫名其妙给标签加个relative的属性，不便于不明白此“奇怪特性”的人维护CSS，因此只要知道有这个特性即可，不需要太过深入。
5.absolute与clip：初次见面，请多指教
CSS世界中有些属性必须和其他属性一起使用才有效，如之前讲过的“文字超出部分省略号显示”效果。clip裁切属性想要起作用，元素必须是绝对定位（absolute）或固定定位（fixed）。clip语法如下：
clip:rect(top right bottom left) 或 rect(top,right,bottom,left)
该属性有两个注意点，搭配起来看会非常蛋疼：1.top和bottom的值都相对于页面垂直流的top，也就是说，是在元素的top裁切到bottom，left和right同理，是相对于页面水平流的left。2.该属性不支持百分比。
作者非常喜欢称overflow:hidden为”裁切”属性，我个人更倾向于“隐藏”，因为hidden并不是真的裁切了元素，在overflow一章我们详细探讨过如果显示overflow:hidden部分的内容。本章要探讨的clip属性更具备“裁切”的特性，由于其必须搭配absolute/fixed才能使用，因此很多人甚至都没有用过这个属性，事实上这个属性我们不仅需要了解，在某些方面他还非常有用。
1）fixed固定定位裁切
对于普通元素或者绝对定位元素，想要对其裁剪，我们可以使用relative搭配overflow:hidden的方式，然而fixed定位的包含块是根元素，这时候我们想要用overflow:hidden的方式必须要给根元素申明，这样用起来就比较蛋疼了，因为通常情况下我们希望根元素的宽高能自适应。此时就需要用到clip属性了。
<!-- clip裁切fixed元素 -->
<div class="box">
<img src="./小和尚.jpg">
</div>
<style>
.box{
position: fixed;
clip: rect(30px 200px 200px 20px)
}
</style>
由于clip裁切的计算是相对于页面的“左上角”的，且不支持百分比计算，因此这个裁切属性用起来不是非常方便，只能在某些特定宽高确定的元素里有一些作用，了解一下即可。
2）最佳可访问隐藏属性
所谓“可访问性隐藏”指的是虽然内容肉眼看不见，但是其辅助功能却能够识别，举个例子，我们需要用到一个logo图标，为了更好的SEO以及无障碍识别，我们一般会使用<h1>标签写上网站的名称，代码如下
<a href="/" class="logo">
<h1>CSS世界</h1>
</a>此时我们需要隐藏CSS世界的文字，通常有以下几种做法。
1.用display:none或者visibility:hidden隐藏，屏幕阅读设备会直接忽略文字。
2.text-indene:-9999，由于文字缩进过大，屏幕阅读设备也不会读取文字。
3.color:transparent,文本框依旧在html中，可被用户选择到，需要取消浏览器的默认事件，操作麻烦。
4.clip裁剪隐藏，既满足视觉上的隐藏，屏幕阅读设备也支持的较好。
鉴于clip裁切是“最佳可访问隐藏”，我推荐在common.css中放入如下class类表示隐藏。
.clip{
position:absolute;
clip:rect(0,0,0,0)
}该属性随取随用，且无依赖绝对定位的兼容性非常好，不会影响正常布局。利用clip裁切不会影响元素本身的特性，我们可以利用他完成表单元素的修改，并保留表单元素的默认操作，如focus，submit等操作，具体这里不过多展开。
本章主要介绍了绝对定位的流体特性以及和绝对定位相关的CSS属性，然而跟绝对定位最亲密的relative属性还没有介绍，鉴于relative和fixed的特殊性，这两个绝对定位好基友我们放到下一章介绍，感兴趣的点个关注吧~
今天的文章css进阶教程_css中的position属性值「建议收藏」分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/57761.html
