布局和定位有什么区别？

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

一个div的分层

从侧面看

  <div class="demo">
    <div class="float">浮动文字</div>
    <span class=text>■你好</span>
    <div class="childDiv">测试</div>
  </div>

.demo{
  background: rgb(120, 184, 211);
  width: 200px;
  height: 200px;
  border: 15px solid rgba(255,0,0,0.2);
  padding: 10px;  
}
.childDiv{
  background: #fff;
  height: 50px;
  color:red;
}
.float{
  float: left;
  background: green;
  height: 50px;
  width: 50px;
  color: red;
}
.text{
  margin-left: -10px;  
}

浮动元素脱离文档流

新属性-position

position: relative

使用场景

• 用于做位移（现在已经很少用）
• 用于给absolute元素做爸爸

配合z-index

• z-index: auto; 默认值，不创建新层叠上下文
• z-index: 0/1/2; 0和默认值是不一样的
• z-index: -1/-2;

经验

• 要学会管理z-index

<div class="container">
  <div class="demo"></div>
  <div class="demo2"></div>
</div>

*{box-sizing: border-box;}
.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;
}

<div class="container">
  <div class="demo"></div>
  <div class="demo2"></div>
</div>

*{box-sizing: border-box;}
.container{
  border: 1px solid red;
  height: 300px;
}
.demo{
  border: 1px solid green;
  background: green ;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  z-index: 1;/*注意z-index的作用*/
}
.demo2{
  background: black;
  width: 50px;
  height: 50px;
  position: relative;
}

position: absolute

使用场景

• 脱离原来的位置，另起一层，比如对话框的关闭按钮
• 鼠标提示

配合z-index

经验

• absolute是相对于祖先元素中最近的一个定位元素（即不是position: static;的元素）定位的
• 某些浏览器上如果不写top/left会位置错乱
• 善用 left: 100%;(即右侧的意思)
• 善用 left: 50%;加负margin

<div class="container">
  <div style="height: 100px;"></div>
  <span class="close">X</span>
  <button>点击
    <span class="tips">提示内容</span>
  </button>
</div>

*{box-sizing: border-box;}
.container{
  border: 1px solid red;
  height: 300px;
  position: relative;/*注意这个position: relative;一定要有*/
  padding: 20px;
}
.close{/*关闭按钮*/
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  background: blue;
  color: white;
}
button{
  position: relative;
}
button span{
  position: absolute;
  border: 1px solid red;
  white-space: nowrap;/*文字内容不换行*/
  bottom: calc(100% + 10px);/*提示内容放在按钮上方*/
  left: 50%;
  transform: translateX(-50%);/*提示内容和按钮居中*/
}
button span{
  display: none;
}
button:hover span{/*鼠标悬浮显示提示内容*/
  display: inline-block;
}

position: fixed

使用场景

• 烦人的广告
• 回到顶部按钮

配合z-index

经验

• 手机上尽量不要使用这个属性，坑很多,比如下面例子中的container有了transform: scale(1.1);属性，就失效了

<div class="container">
  <div class="fixed">^</div>
  P{$}*100
</div>

*{box-sizing: border-box;}
.container{
  border: 1px solid red;
  height: 300px;
  position: relative;
  padding: 20px;
}
.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;
  background: green;
}

position: sticky

大概意思就是当页面还没到sticky的元素时就按照文档流，当出现要看不见sticky的元素时，就会粘在页面上不会消失。比较适合导航栏。目前兼容性较差，不是很常用

position总结

取值

• static：默认值，待在文档流里
• relative：相对定位，升起来，但不脱离文档流
• absolute：绝对定位，定位基准是祖先里的最近的非static
• fixed：固定定位，定位基准是viewport（有诈）
• sticky：粘滞定位

经验

• 如果你写了absolute，一般都得补一个relative
• 如果你写了absolute或fixed，一定要补top和left
• sticky兼容性很差

层叠上下文

一个div的分层

<div class="container">
  文字
  <div class="relative"></div>
  <div class="relative2"></div>
</div>

*{margin: 0;padding: 0;box-sizing: border-box;}
.container{
  border: 1px solid black;
  height: 200px;
  background: rgba(255,255,0,0.5)
}
.relative{
  height: 50px;
  background: red;
  position: relative;/*在文字的上面*/
  top: -10px;
  z-index: 1;
}
.relative2{
  height: 50px;
  background: green;
  position: relative;
  z-index: -1;/*在container背景的后面*/
}

思考：z-index: 10 和 z-index: 5 哪个高？

看情况。

• 每个层叠上下文就是一个新的小世界（作用域）
• 这个小世界里面的z-index跟外界无关
• 处在同一个小世界的z-index才能比较

哪些属性可以创建层叠上下文？

• 需要记忆的有：
  • z-index不为auto
  • flex布局
  • opacity不为1
  • transform不为none

负z-index与层叠上下文

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

<div class="container">
  <div class="demo"></div>
</div>

*{margin: 0;padding: 0;box-sizing: border-box;}
.container{
  border: 1px solid black;
  height: 200px;
  background: rgba(255,0,255,0.2);
  position: relative;
  z-index: 0;/*这句话代表将container变成了层叠上下文，所以demo在container上面*/
}
.demo{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  z-index: -1;
}