CSS进阶（13）——position：absolute如此⾼深，我当真不
懂（中）
在上⽂中，我们探讨了绝对定位的包含块以及“⽆依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。
1.absolute的流体特性
在前⾯⼀⽂中，我们测试了很多“⽆依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使⽤absolute都⽤的都是他的“绝对定位”特性，这也是absolute被设计出来的本职⼯作。为了做好⾃⼰的本职⼯作，absolute还需要left，top，right，bottom四个属性的配合，通常，我们会根据阅读顺序(从左到右，从上到下)的需要，设置absolute元素的left和top值，来达到元素定位的效果，那么，如果仅设置⼀个⽅向上的值，会发⽣什么呢？这⾥我们不深⼊探讨这种情形，你只需要知道元素在被设置的⽅向上保持“绝对定位”的特性，⽽在另⼀个（⽔平或垂直）⽅向上保持相对定位特性即可。
本节要深⼊探讨的是absolute的流体特性。说到流体特性，我们应该能很快想到<div>之类的普通块级元素，实际上，绝对定位元素也具有类似的流体特性，⽽且在某些情况下⽐普通块级元素更强⼤！当然，absolute要实现⾃⾝的流体特性是有条件的，给元素直接设
置外边距的auto属性是不会有任何计算值的。那么，absolute元素才能拥有流体特性呢？这个条件就是“对⽴⽅向同时发⽣定位”的时候。
left，top，right，bottom是具有定位元素的专⽤CSS（注意不只是绝对定位），其中left和right属于⽔平对⽴定位⽅向，⽽top和bottom属于垂直对⽴定位⽅向。当⼀个绝对定位元素，其对⽴定位⽅向属性同时具有值得时候，那么该元素在该对⽴⽅向上具有流体特性，当然如果你乐意的话，绝对定位元素可以同时在⽔平和垂直⽅向上都具有流体特性。流体特性最显著的特点就是⾃动铺满流体⽅向上的空间，就像物理世界的⽔会铺满烧杯⼀样。下⾯我们来测试⼀下该特性的具体表现。
<!-- 绝对定位的流体特性 -->
<div >
<div >我是⽔平流</div>
</div>
<div >
<div >我是垂直流</div>
</div>
<div >
<div >
我是⽔平垂直流</div>
</div>
如果只有left属性没有right属性，absolute则表现为“包裹性”。在垂直⽅向上的表现同理。
<div >
<div >包裹性</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: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的包裹性！我刚才已经提到了a
bsolute元素如果只有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 >
<span >hello</span>
</div>
上图中，absolute元素似乎受到text-align的影响处于容器中偏右的位置，那么text-align真的可以影响块元素吗？答案是否定的。在本例中，text-align影响的依旧是内联元素，只是这个内联元素是你看不到“幽灵空⽩节点”。由于span标签原来是个内联元素，因此在该元素前⾯⽣成了⼀个幽灵空⽩节点，这个节点默认是个内联元素，受到了text-align:center的感化，跑到了div的中间，虽然不占位置，但占据了⼀个看不见的空间，⽽这个看不见的空间对后⾯的“⽆依赖绝对定位”元素产⽣了影响，这个absolute元素就乖乖的跟在后边了。因此本例中，absolute元素并不是直接和text-align发⽣关系！
text align center4.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 >
<div class="box">
<img src="./⼩和尚.jpg" />
</div>
</div>
<!-- overflow元素本⾝是定位元素 -->
<div class="box" >
<img src="./⼩和尚.jpg" />
</div>
<!-- overflow元素与绝对定位元素之间有定位元素 -->
<div class="box" >
<div >
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。