CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）

在上一篇文章中，咱们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章咱们来聊聊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>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

我是水平流

我是垂直流

我是水平垂直流

若是只有left属性没有right属性，absolute则表现为“包裹性”。在垂直方向上的表现同理。

<div style="position:relative;height: 100px;background: yellow;margin: 20px;">
    <div style="position: absolute;background: #f34413;left: 0;">包裹性</div>
</div>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

包裹性

下面咱们要实现一个元素彻底覆盖浏览器可视窗口的效果，有不少种方法能够实现这个效果，下面咱们只关注用absolute如何实现这种效果。

<style> .box1{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .box2{ 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>
复制代码

因为markdown编辑器支持标签语言，所以咱们能够直接预览最终效果以下（小提示：你能够经过浏览器直接检查下面的元素看到CSS样式）

事实上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世界的文字，一般有如下几种作法

• 用display:none或者visibility:hidden隐藏，屏幕阅读设备会直接忽略文字。
• text-indene:-9999，因为文字缩进过大，屏幕阅读设备也不会读取文字。
• color:transparent,文本框依旧在html中，可被用户选择到，须要取消浏览器的默认事件，操做麻烦。
• clip裁剪隐藏，既知足视觉上的隐藏，屏幕阅读设备也支持的较好。

鉴于clip裁切是“最佳可访问隐藏”，我推荐在common.css中放入以下class类表示隐藏。

.clip{
   position:absolute;
   clip:rect(0,0,0,0)
}
复制代码

该属性随取随用，且无依赖绝对定位的兼容性很是好，不会影响正常布局。利用clip裁切不会影响元素自己的特性，咱们能够利用他完成表单元素的修改，并保留表单元素的默认操做，如focus，submit等操做，具体这里不过多展开。

本章主要介绍了绝对定位的流体特性以及和绝对定位相关的CSS属性，然而跟绝对定位最亲密的relative属性尚未介绍，鉴于relative和fixed的特殊性，这两个绝对定位好基友咱们放到下一章介绍，感兴趣的点个关注吧~

不忘初心，方得始终

喜欢博主的童鞋能够扫描二维码加博主好友~ 也能够扫中间二维码入驻博主的粉丝群（708637831）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。