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

叁歲伎倆 2021-09-17 04:34 318阅读 0赞

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

![20181205155202800.png][]

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

![20181205160609851.png][]

下面我们要实现一个元素完全覆盖浏览器可视窗口的效果，有很多种方法可以实现这个效果，下面我们只关注用absolute如何实现这种效果。

上面这两种方法都可以实现元素铺满整个屏幕的效果（在包含块是HTML的情况下），但是他们的实现原理却完全不同，后者也就是设定了宽高的那个元素，实际上已经完全失去了流动性，而且当前元素的宽高已经被准确计算了，此时你还想要添加内边距或外边距便会造成“宽高溢出”的表现，而用第一种方法实现则完全不会出现这种情况。

### 2.利用absolute实现水平垂直居中 ###

我们可以利用absolute的流体特性实现一种常用的布局——水平垂直居中。我们都知道，块级元素本身具有流体特性，在[margin一章中][margin]我们也详细介绍了margin:auto的自适应计算属性。当元素具有流体特性，如div在水平方向上具有流体特性，此时设置margin:auto，该元素的外边距就会在水平方向上自动等分成两份，使得元素本身在父容器中显示为水平居中效果。因此，margin的auto属性用在具有垂直水平都具有流体特性的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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70][]

事实上absolute还有一种做法也可以实现元素的水平垂直居中，这种做法需要借助transform配合，我们先来看一下演示。

<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中填充一些文字看一下效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1][]

要解决这个问题很简单，只要给absolute元素加上white-space:norwap强制文字不换行即可，但这样也会有问题，就是文字内容会超出父容器，因此个人建议弃用这种垂直居中的布局方式。

### 3.absolute与text-align ###

众所周知，text-align从字面上理解是指文本的对齐方式，因此控制的是内联元素的表现，而absolute具有块状化元素的特性，因此这两个属性可以说是八杆子打不着的关系。然而在下面这段代码中，text-align属性似乎对absolute元素产生了影响。

<div style="text-align: center;">
     	<span style="position: absolute;">hello</span>
     </div>

![20181207114046628.png][]

上图中，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裁切。

<div class="box">
    	<img src="./小和尚.jpg" /> 	
    </div>
    
    <div style="position: relative;">
    	<div class="box">
    		<img src="./小和尚.jpg" /> 	
    	</div>
    </div>
    
    <div class="box" style="position: relative;">
    	<img src="./小和尚.jpg" /> 	
    </div>
    
    <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>

![20181210110034933.png][]

除了hidden"裁切"属性，overflow还有auto和scroll属性，这两个属性在遇到绝对定位的时候选择直接无视，即使绝对定位元素宽高大于overflow元素，也不会出现滚动条。

<div class="box">
     	<img style="position: absolute;" src="./小和尚.jpg" />
     </div>
     <style>
     	.box{
     		width: 300px;
     		height: 200px;
     		overflow: auto;
     		background: yellow;
     	}
     </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 2][]

虽然绝对定位元素不能影响元素出现滚动条，但普通元素可以，在box元素中填充足够内容后，我们来看下滚动条和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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 3][]

可以看到，滚动条滚动的过程中，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属性了。

<div class="box">
    	<img src="./小和尚.jpg">
    </div>
    <style>
    	.box{
    		position: fixed;
    		clip: rect(30px 200px 200px 20px)
    	}
    </style>

![2018121013305692.png][]

由于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的特殊性，这两个绝对定位好基友我们放到下一章介绍，感兴趣的点个关注吧~

[20181205155202800.png]: /images/20210813/92ca2f80bb0a48298ba6e28e57c7a8e5.png
[20181205160609851.png]: /images/20210813/e7e246986365456b81b5708959dcd878.png
[margin]: https://blog.csdn.net/dkr380205984/article/details/84299612
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70]: /images/20210813/b7ffbba339e044418e976ba01762589c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1]: /images/20210813/7223729c32784388b5ad666e56188d45.png
[20181207114046628.png]: /images/20210813/60564a9dc4464b75a4f00a0153c52afd.png
[20181210110034933.png]: /images/20210813/249eecbf2de6428392dc63b153d77b56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 2]: /images/20210813/e7b79614c4a44011b6966c535249cf91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 3]: /images/20210813/d25499d023a549aaa08d5ef369c79539.png
[2018121013305692.png]: /images/20210813/c0d0b58b3a0d4c65916be51a86a3e196.png