参考：饥人谷教育

div的分层

布局是屏幕平面上的，定位是垂直于屏幕的

div分层

背景范围：border外边沿围成的区域
浮动元素float脱离文档流，浮起了一点
在浮动元素上的文字是低于内联子元素的
在块级子元素上的文字与内联子元素，是按照先后出现顺序决定位置的，后出现的要高于先出现的

position

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>position</title>
</head>
<body>
<div class="container">
     <div class="demo"></div>
</div>
</body>
</html>

CSS

.container{
    border: 1px solid red;
    height: 300px;
}
.demo{
    border: 1px solid green;
    width: 50px;
    height: 50px;
    position: static; //该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
}

效果

效果1

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
进行元素的偏移(很少使用)
给absolute元素做爸爸(见下)
配合z-index，z-index:auto为默认值；当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>position</title>
</head>
<body>
<div class="container">
     <div class="demo"></div>
     <div class="demo2"></div>
</div>
</body>
</html>

CSS

.container{
    border: 1px solid red;
    height: 300px;
}
.demo{
    border: 1px solid green;
    width: 50px;
    height: 50px;
    position: relative;//占位不变,显示偏移
    top: 10px;
    left: 10px;
}
.demo2{
    background: black;
    width:50px;
    height:50px;    
}

效果 (位移)

效果2

CSS

.container{
    border: 1px solid red;
    height: 300px;
}
*{box-sizing:borderbox;}
.clearfix:after{
  content:'';
  clear:both;
  display:both;
}
.demo{
    background:green;
    border: 1px solid green;
    width: 50px;
    height: 50px;
    position: relative;
    top:5px;
    //之后增加代码：z-index:1;
}
.demo2{
    background: black;
    width:50px;
    height:50px;
    position: relative;
}

原效果

原效果1

效果(增加z-index:1;)

效果3

absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

使用场景：
1.×关闭按钮；
2.鼠标悬浮提示

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>position</title>
</head>
<body>
<div class="container clearfix">
     <div class="demo"></div>
     <div class="demo2"></div>
     <span class="close">X</span>
</div>
</body>
</html>

CSS

.container {
  border: 1px solid red;
  height: 300px;
  position: relative;//作为爸爸，定位以此为基准
}
* {
  box-sizing: borderbox;
}
.clearfix:after {
  content: '';
  clear: both;
  display: both;
}
.demo {
  background: green;
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 5px;
  z-index: 1;
}
.demo2 {
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
}
.close {
  position: absolute;//以上面的爸爸为基准进行定位
  top:0;
  right:0;
  padding: 0 10px;
  background:red;
  color:white;
}

效果(关闭按钮)

效果4

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>position</title>
</head>

<body>
  <div class="container clearfix">
    <div class="demo"></div>
    <div class="demo2"></div>
    <span class="close">X</span>
    <div style="height:100px"></div>
    <button>点击
      <span class=tips>下一页</span>
    </button>
  </div>
</body>

</html>

CSS

.container {
  border: 1px solid red;
  height: 300px;
  position: relative;
  padding: 20px;
}
* {
  box-sizing: borderbox;
}
.clearfix:after {
  content: '';
  clear: both;
  display: both;
}
.demo {
  background: green;
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 5px;
  z-index: 1;
}
.demo2 {
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
}
.close {
  position: absolute;
  top:0;
  right:0;
  padding: 0 10px;
  background:red;
  color:white;
}
button{
  position: relative;
}
button span{
  position: absolute;
  border: 1px solid black;
  white-space:nowrap; /*文字不换行*/
  bottom: calc(100% + 5px);/*设定具体位置*/
  left:50%;
  transform:translateX(-50%);/*居中显示*/
}
button span{
  display: none;/*默认为不可见*/
}
button:hover span{
  display: inline-block;/*悬浮时可见*/
}

效果

效果5

fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

建议：移动端不要使用fixed
使用场景：

广告
回到顶部按钮

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>position</title>
</head>

<body>
  <div class="container clearfix">
    <div class=fixed>△</div>
    
  </div>
</body>

</html>

CSS

.container {
  border: 1px solid red;
  height: 300px;
  position: relative;
  padding: 20px;
}
* {
  box-sizing: borderbox;
}
.clearfix:after {
  content: '';
  clear: both;
  display: both;
}
.fixed{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  border: 1px solid green;
  width: 100px;
  height: 100px;
}

.fixed{
  position: fixed;
  left: 10px;
  bottom: 10px;
}

效果

左下角返回顶部按钮

sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。

层叠上下文

每个层叠上下文都是一个沙盒（作用域）
沙盒中的z-index与外面的世界无关
处于同一沙盒的z-index才能进行比较

除了z-index: 0 还有哪些属性可以创建层叠上下文？

文档中的层叠上下文由满足以下任意一个条件的元素形成：

文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素（参见 the specification for opacity）；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
-webkit-overflow-scrolling 属性值为 touch 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
需要记忆的：z-index:0；flex；opacity＜1；transform

前端探索 | CSS定位

前端探索 | CSS定位

div的分层

position

static

relative

absolute

fixed

sticky

层叠上下文

除了z-index: 0 还有哪些属性可以创建层叠上下文？