文章目录

一、CSS之position定位方式
- 1.static
- 2.relative
- 3.absolute（脱离正常文档流）
- 4.fixed（脱离正常文档流）
- 5.sticky
二、z-index

一、CSS之position定位方式

position 属性规定元素的定位类型，有以下五种：

static
relative
absolute(脱离文档流)
fixed（脱离文档流）
sticky（新属性）

两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高

常用 top/bottom/left/right 属性进行偏移

1.static

静态定位，是position的默认值，可不设置。
默认布局方式，从上到下，从左到右，正常文档流。
position: static;

2.relative

相对定位
在确定元素的默认位置之后，通过top/bottom/left/right设置偏移
偏移后，元素所占的空间保留原位，其他元素不会挤占原来空间

有三个并列在一行的盒子，将中间的一个盒子position设为relative，
且 “left: 50px; top: 15px;” 意为在原位置的基础上，距左边再偏移50px，距顶部再偏移15px

<style>
.box {width: 150px;height: 150px;background-color: rgb(69, 172, 0);margin: 10px;display: inline-block;}.box2 {background-color:rgb(47, 64, 160);position: relative;left: 50px;top: 15px;
}
</style><div class="container"><div class="box">box1</div><div class="box box2">box2</div><div class="box">box3</div>
</div>

偏移前：
偏移后结果图：（黑框为蓝色box2原位置）

3.absolute（脱离正常文档流）

绝对定位，把元素移出正常的文档流。
后面的元素会挤占它的空间，自己则会覆盖在挤占他空间的元素上方。

可以使用top/bottom/left/right偏移，但这些属性是相对于包含它的元素来偏移的。

包含元素：

如果这个元素的所有父级元素都没有设置position/transform/perspective属性，那么包含元素就是包含HTML元素的容器，即浏览器的窗口，这时相对浏览器左上角进行偏移；例如：

示例： box2设置绝对元素，但任意父级元素都没有设置position/transform/perspective属性，这时就会相对浏览器左上角进行位移：

<style>
.box {width: 150px;height: 150px;background-color: rgb(69, 172, 0);margin: 10px;display: inline-block;
}.box2 {background-color: rgb(47, 64, 160);position: absolute;left: 50px;top: 15px;
}
</style>  <p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<div class="container"><div class="box">box1</div><div class="box box2">box2</div><div class="box">box3</div>
</div>

偏移结果如图：可以看到box2的原位置已经被挤占，且以浏览器左上角进行偏移

如果父级元素中包含position/transform/perspective属性，那么包含元素就是离他最近的设置了的元素，是相对父级元素的判定盒子边界进行位置偏移的。

盒子边界：内边距与边框的交界处
通常使用relative来设置包含元素，不会影响正常的文档流

示例：在.container加上transform属性，此时box2设置absolute，最近的包含元素就是container，故box2所以相对container进行偏移

<style>
.container_ {transform: translateX(0);/*为方便观察，加上边框*/border:gray 1px solid;
}.box_ {width: 150px;height: 150px;background-color: rgb(69, 172, 0);margin: 10px;display: inline-block;
}.box2_ {background-color: rgb(47, 64, 160);/*.container有transform，所以相对.container进行偏移*/position: absolute;left: 50px;top: 15px;
}
</style>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<div class="container_"><div class="box_">box1</div><div class="box_ box2_">box2</div><div class="box_">box3</div>
</div>

偏移结果如下：

4.fixed（脱离正常文档流）

固定定位，无论页面怎么滚动都会固定在同一个位置，适用固定浮窗、导航条

left:0;right:0; 宽度占满容器，若设置top:0则在最顶，bottom:0最底部
bottom:0;top:0; 高度占满容器，若设置left:0则在最左边，right:0最右

<style>
#bottom {background-color: green;position: fixed;/*left、right为0，占满容器宽度*/bottom: 0;left:0;right:0;
}#right {background-color: rgb(168, 255, 168);position: fixed;/*top、bottom为0，占满容器高度*/right:0;top: 0;bottom: 0;opacity: 0.5;
}
</style><p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<footer id = "bottom">浮动在最下侧</footer>
<footer id = "right">浮动在最右侧</footer>

5.sticky

新属性，relative和fixed结合体。
top:0 滚动时元素离窗口一定位置时，把它变成固定在顶部，其他元素还在正常的文档流中

<style>
nav {background-color: blue;position: sticky;top: 0;
}
</style>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<nav>导航栏</nav>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>
<p>这是一段占位文本</p>

固定前：

固定后：

二、z-index

设置z轴方向的偏移，默认值为0。
z-index:0
可设置正/负数，数值越大，显示在越前。

若在一个包含元素中有两个absolute元素交叠，那么后定义的元素会覆盖先定义的元素。
若要先定义的元素在前，可设置z-index数值实现，示例：

<style>
.container {transform: translateX(0);
}
.box {width: 150px;height: 150px;background-color: rgb(69, 172, 0);margin: 10px;display: inline-block;
}
.box1 {position: relative;z-index: 10;//显示在前
}
.box2 {background-color: rgb(47, 64, 160);position: absolute;left: 50px;top: 15px;
}
</style><div class="container"><div class="box box1">box1</div><div class="box box2">box2</div>
</div>

默认情况：

z-index后：

若两个包含元素，且那么堆叠顺序是按照包含元素的z-index显示

十分钟轻松搞懂CSS的五大定位方式！（建议收藏）相关推荐

iOS-通俗易懂的微信支付接入和爬坑指南，十分钟轻松搞完
现在基本所有的App都会接入支付宝支付以及微信支付,也有很多第三方提供给你 SDK帮你接入,但是这种涉及到支付的东西还是自己服务器搞来的好一些,其实搞懂了逻辑非常的简单,下面直接给大家说说下基本流 ...
十分钟时间搞懂怎么用JS代码渲染实时时间
给大家讲一下怎么用JS初级的内容来写一个页面实时渲染时间的方法目录先给大家看一下展示一下效果吧一.在这个效果上用的Date对象的方法二.这个效果的逻辑思路是什么呢? 1.我们应该先实例化一个D ...
❤『知识集锦』一文搞懂mysql索引！！（建议收藏）
作者:不吃西红柿简介:CSDN博客专家.蓝桥签约作者.大数据领域优质创作者. 以我的资历和文凭,将来这个城市的大街,都归我扫. [系列课程介绍] 『面试知识集锦』系列课程包括以下20个系列,超过 ...
3 万字 + 100 张图带你彻底搞懂 TCP 面试题（强烈建议收藏）
大家好,我是小林,一个专为大家图解的工具人. 不管面试 Java .C/C++.Python 等开发岗位, TCP 的知识点可以说是必问的了. 任 TCP 虐我千百遍,我仍待 TCP 如初恋. 过去不 ...
【万字长文+100余张图】轻松搞定Unix/Linux环境使用，建议收藏！
1 Unix/Linux操作系统介绍 1.1 操作系统的作用 1.1.1 操作系统的目标方便:使计算机系统易于使用有效:以更有效的方式使用计算机系统资源扩展:方便用户有效开发.测试和引进新功能 ...
一篇文章搞懂FastDfs(全是干货，建议收藏）
这里写目录标题 1. 什么是分布式文件系统 2. 为什么要使用分布式文件系统 3. FastDFS 与 HDFS比较 4. 什么是FastDFS 5. 常见术语 6. FastDFS架构 7. Fas ...
十招轻松搞定社会媒体
十招轻松搞定社会媒体十招轻松搞定社会媒体社会媒体化成为在线营销的重要手段不再是什么秘密了,写一些好的内容并且进行推广只是这个过程的一小部分,你还必须加强在网络社会的曝光机会,有些人不知道如何开 ...
10分钟，搞懂引力波
10分钟,搞懂引力波 https://baijiahao.baidu.com/s?id=1581560461270739279&wfr=spider&for=pc 汉周读书 17- ...
php service原理,轻松搞懂WebService工作原理
用更简单的方式给大家谈谈WebService,让你更快更容易理解,希望对初学者有所帮助. WebService是基于网络的.分布式的模块化组件. 我们直接来看WebService的一个简易工作流程: ...

十分钟轻松搞懂CSS的五大定位方式！（建议收藏）