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

上章咱们聊了和absolute的流体特性以及和absolute搭配使用的CSS属性，本章咱们就来聊一聊position家族的另外两大成员——relative和fixed。

## 1.relative的定位（不推荐使用）

理论上relative/absolute/fixed都能对absolute的"包裹性"以及"定位"产生限制，但只有relative能使得元素保持在正常的文档流中，所以咱们每每使用absoluted搭配relative使用。以前讲到，left/right/top/bottom是定位家族的特有属性，所以relative也支持定位，且relative定位有两大特性：一是相对自身定位，二是“无侵入”。 为了更好的展现relative的特性，咱们引入absolute元素进行对比。

测试一：left:0,top:0;

<!-- relative定位测试 -->
<div class="container">
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
</div>
<style> .container{ width: 200px; height: 200px; background: #999999; padding:100px; border:5px solid red; position: relative; } .relative{ width: 100px; height: 100px; background: green; position: relative; left: 0; top: 0; } .absolute{ width: 100px; height: 100px; background: yellow; position: absolute; left: 0; top: 0; } </style>
复制代码

第一个测试，absolute元素的包含块是父元素的padding-box，所以absolute移到包含块左上角，而relative元素纹丝不动。

测试二：left:100px;top:100px;

测试二的结果代表relative元素是相对于自身发生偏移的，也就是说relative的偏移位置跟他原来所处的位置有关，也就是第一个特性——相对自身定位。

测试三：加入吃瓜群众。

relative定位前：

<!-- relative定位测试 -->
<div class="container">
    <div class="">我是一个吃瓜群众</div>
    <div class="relative">relative</div>
    <!-- <div class="absolute">absolute</div> -->
    <div class="">我是一个吃瓜群众</div>
</div>
<style> .container{ width: 200px; height: 200px; background: #999999; padding:100px; border:5px solid red; position: relative; } .relative{ width: 100px; height: 100px; background: green; position: relative; /*left: 100px; top: 100px;*/ } .absolute{ width: 100px; height: 100px; background: yellow; position: absolute; left: 100px; top: 100px; } </style>
复制代码

relative定位后：

<!-- relative定位测试 -->
<div class="container">
    <div class="">我是一个吃瓜群众</div>
    <div class="relative">relative</div>
    <!-- <div class="absolute">absolute</div> -->
    <div class="">我是一个吃瓜群众</div>
</div>
<style> .container{ width: 200px; height: 200px; background: #999999; padding:100px; border:5px solid red; position: relative; } .relative{ width: 100px; height: 100px; background: green; position: relative; left: 100px; top: 100px; } .absolute{ width: 100px; height: 100px; background: yellow; position: absolute; left: 100px; top: 100px; } </style>
复制代码

能够发现：relative元素相对于自身定位先后，吃瓜群众的位置保持不变，只有relative相对于自身发生了偏移，所以relative是一种无侵入的定位，不会影响其余元素原来的布局行为。

除此以外，relative定位还有两个点值得一提，首先是相对定位元素的left/right/top/bottom的百分比值是相对于包含块进行计算的，还有一点是当relative元素同时出现相同方向上的定位时（如left：0，right：0）不会保持absolute的拉伸特性，而是取文档流方向的一边做为惟一值，也就是只保留left和top。

在测试三中，咱们看到了一个层叠现象，因为relative元素的层叠顺序是"鬼畜"级别的（层叠规则会在后续文章中详细讲解），所以做者不建议使用relative进行定位。所以relative几乎能够看做是absolute的附属css了。

2.无依赖固定定位（fixed）

position:fixed的固定定位元素的"包含块"是根元素（近似），也就是除了根元素没人能限制fixed元素？不知你是否还记得无依赖绝对定位的特性，下面咱们来测试一下，是否有无依赖固定定位。

<!-- 无依赖固定定位 -->
<div class="container">
    <span>随便说两句</span>
    <div class="fixed"></div>
</div>
<style type="text/css"> .container{ width: 200px; height: 200px; background: #999999; padding:100px; border:5px solid red; } .fixed{ width: 100px; height: 100px; background: green; position: fixed; } </style>
复制代码

通过测试，确实存在无依赖固定定位，且表现和无依赖绝对定位“相同”。那么知道了这个特性有什么用呢？我的认为，没什么软用，既然用了固定定位，就是要利用其依赖跟元素进行定位，因此无依赖固定定位也就没什么软用了。

3.利用fixed固定定位生成滚动条锁定的弹窗

一般状况下，弹窗功能须要依托浏览器进行定位，而不是某个元素，由于咱们但愿弹窗总能出如今屏幕的“居中”位置，要实现这个功能很是简单，只须要用到固定定位便可。

<!-- 固定定位生成弹窗 -->
<div class="fixed">
    <div>我是弹窗</div>
</div>
<style> html,body{ margin: 0; height: 200%; background-image: url('../小和尚.jpg'); } .fixed{ position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.5); margin: auto; } .fixed div{ position: absolute; right: 0; top: 0; left: 0; bottom: 0; width: 40%; height: 30%; background: #fff; margin: auto; overflow: auto; } </style>
复制代码

咱们实现了居中效果，但还有一个麻烦就是fixed元素的包含块是html，所以html的内容有滚动条的时候，在弹窗页面咱们依旧能够控制html滚动条的滚动，这样的用户体验并很差。

所以若是咱们须要一个滚动条固定的弹窗效果，必须让滚动条不在html上，咱们能够在html下面生成一个父级容器，让父级容器来生成滚动条，这样就不会影响fixed固定定位了。以下所示

<!-- 固定定位生成不能滚动的弹窗 -->
<div class="father">
    <div style="height: 200%;background: url('../小和尚.jpg');">我来生成滚动条</div>
    <div class="fixed">
	    <div>我是弹窗</div>
    </div>
</div>
<style> html,body{ margin: 0; height: 100%; overflow: hidden; } .father{ height: 100%; overflow: auto; } .fixed{ position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.5); margin: auto; } .fixed div{ position: absolute; right: 0; top: 0; left: 0; bottom: 0; width: 40%; height: 30%; background: #fff; margin: auto; overflow: auto; } </style>
复制代码

关于定位元素的讲解到本章就暂时结束了，在CSS中定位元素的使用十分普遍，所以详细的了解其特性有助于咱们更好的布局。

不忘初心，方得始终

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