CSS定位布局是屏幕上面的，定位是垂直于屏幕的。打开开发者工具，选中border，找到rgba中第四个数值，按住alt

布局和定位的区别：

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

背景的范围是从哪到哪？答案是，border外边沿围城的区域

把border颜色设置成 rgba(0,0,0,1) 验证即可

  border:5px solid rgba(0,0,0,0.5);    
  background: green;

打开开发者工具，选中border，找到rgba中第四个数值，按住alt用上下键或者鼠标滚轮进行调节透明度，可以看出随着透明度提高，背景色渐渐透了出来，证明结论是正确的。

从左侧看一个div是什么样子的？

用代码验证猜想

补充：

文字内容之间的覆盖顺序是按文字出现的先后顺序决定的，后出现的文字可以盖住前面的文字。

position属性定义 (来自MDN文档)

用于指定一个元素在文档中的定位方式。

top，right，bottom 和 left 属性则决定了该元素的最终位置。

定位元素（positioned element）：是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）：是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）：是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）：是计算后位置属性为 sticky 的元素。

static（默认值，待在文档流里）该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative（相对定位，但不脱离文档流，升起来。。）
absolute（绝对定位，定位基准是祖先里的非static）
fixed（固定定位，定位基准是viewport(视口)，这个有诈。。）
sticky（粘滞定位）元素根据正常文档流进行定位，然后相对它的最近滚动祖先和包含块(最近块级祖先)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

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

经验

如果你写了absolute，一般都得补一个relative。
如果你写了absolute或fixed，一定要补top和left。
sticky兼容性很差，主要用于面试装13。。

positon: relative

相对于原来位置移动，元素设置此属性后，仍处于文档流中，不影响其他元素的布局。

relative概念： 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

使用场景：

用于做位移（很少用。。就是用top、left进行移动）
用于给absolute元素做爸爸.

配合z-index <z-index> 的定义是：

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index:auto; 默认值，不创建新层叠上下文。

z-index:0/1/2

z-index可以取负值。

z-index:-1/-2

经验

学会管理Z-index，不要写Z-index:9999

position: absolute

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

使用场景：

脱离原来的位置，另起一层，比如对话框的关闭按钮。。
鼠标提示，也可以配合z-index使用

补充：white-space: nowrap;
作用：文字内容不准换行场景一（对话框关闭按钮）：

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>                                   //祖先元素
<div class="container">                  //祖先元素
  <span class="close">X</span>
</div>
</body>
</html>

CSS:

*{padding: 0;margin: 0;box-sizing: border-box;}
.container{
  border:1px solid red;
  height: 300px;
  position: relative;
  padding: 40px;
}
.close{
  position: absolute;
  border:1px solid green;
  top: 0;
  right: 0;
  padding: 1px 5px;
  background: blue;
}

场景二（鼠标提示）:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>                             //祖先元素
  <div class="container">          //祖先元素
<button>点击                       //祖先元素
  <span class="tips">提示内容</span>
</button>
  </div>
</body>
</html>

CSS:

.container{
  padding:100px;
  border:1px solid red;
}
button{
  position: relative;
}
button span{
  position: absolute;
  border:1px solid blue;
  white-space: nowrap;
  bottom: calc(100% + 10px);          //作用是设置间距。注意，+前后一定要空格
  left: 50%;                          //*居中
  transform: translateX(-50%);        //*居中
}
button span{
  display: none;                      //设置默认情况下看不见
}
button:hover span{
  display: inline-block;              //鼠标悬浮，变成inline-block
}

效果演示：

经验

absolute相对于祖先元素中，最近的一个定位元素定位的（非static的元素就是定位元素）
某些浏览器上如果不写top/left/right/bottom会位置错乱。（就算位置对了也要写，不然会出BUG）
用好top/left/right/bottom: 100% 这类样式比如，让某个样式靠右，可以用left: 100%

button{
  position: relative;
}
button span{
  position: absolute;
  border:1px solid blue;
  white-space: nowrap;
  bottom: 100%;           //距离底部100%，上移
  left: 100%;             //距离左侧100%，靠右
}

善用left: 50%; 加负margin 居中：

button{
  position: relative;
}
button span{
  position: absolute;
  border:1px solid blue;
  white-space: nowrap;
  bottom: calc(100% + 10px);
  left: 50%;                   //左移50%
  margin-left: -27px;          //这里的-27px是span宽度的一半，开发者工具可查看宽度
}

left：50%的效果：

left：50%的效果

加上负margin的效果：

或者用transform: translateX(-50%); 也能居中。

position: fixed

fixed概念： 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。

fixed 属性会创建新的层叠上下文。

当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

使用场景：

烦人的广告
回到顶部按钮
配合z-index使用代码示例：

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="fixed">▲</div>
  p{$}*50 + tab     //快速打出50个p标签
</div>
</body>
</html>

CSS：

.container{
  border:1px solid red;
  min-height:300px;
  position: relative;
  padding: 20px;
}

*{box-sizing:border-box;}

.fixed{                       //用flex把三角形设置成居中样式
  display: flex;
  border:5px solid red;
  justify-content: center;
  font-size: 50px;
  height: 80px;
  width: 80px;
}
.fixed{
  position: fixed;
  left: 10px;
  bottom: 10px;
}

鼠标滚动下滑页面，图标一直存在左下角，随着页面滚动而滚动。

经验手机上尽量不要使用fixed，坑很多。。

position: sticky (粘滞定位)

兼容性差，很多浏览器不支持

代码示例:

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="sticky">xxx</div>
  p{$}*50 + tab     //快速打出50个p标签
</div>
</body>
</html>

CSS:
.sticky{
  position: sticky;               //三者缺一不可
  position: -webkit-sticky;       //三者缺一不可
  top:0;                          //三者缺一不可
  border:5px solid green;
  background:green;
}

效果：

出现一栏类似导航栏一样的条形框，粘在视口上方，页面下滑依然附着在顶部。

层叠上下文

比喻：

每个层叠上下文就是一个新的小世界（也叫作用域），这个小世界里面的z-index跟外界无关，处在同一个小世界里面的z-index才能比较。 默认的层叠上下文是html标签

层叠上下文代码

如何产生“层叠上下文”呢？

html中根元素 <html> </html> 本身就具有层叠上下文，称为 “根层叠上下文”
普通元素设置position属性为非static值，并设置z-index属性为具体数值，产生层叠上下文。
CSS中的新属性也可以产生层叠上下文。需要记忆的有：
z-index为具体数值，比如0，且设置position属性为非static值。
flex容器的子元素，且z-index不为auto。
opacity属性值小于1的元素。 opacity与rgba(0,0,0,1)的区别是opacity调的是整体，所有的背景色为半透明，rgba调的只是背景色。
transform属性值不为none。

负z-index与层叠上下文

记住！负z-index逃不出小世界

CSS定位

布局和定位的区别：

position属性定义 (来自MDN文档)

经验