固定定位

1、固定定位

当网页垂直方向高度值很大时，浏览器会出现滚动条，当我们移动滚动条时，页面会卷上去，如果使用固定定位，该位置会一直展现在网页上

固定定位是脱标的

<div class="b back"></div>
<div class="top fixed">top</div>
<div class="nav">nav</div>
<div class="container">container</div>

css样式：

* {
  margin: 0;
  padding: 0;
}
.top {
  width: 100%;
  height: 120px;
  background-color: #f0eae6;
  top: 0;
}
/* 为了让nav也显现出来，需要给nav添加外边距  */
.nav {
  width: 100%;
  height: 50px;
  background-color: #336699;
  margin-top: 120px;
}
.container {
  width: 1200px;
  height: 3500px;
  margin: 0 auto;
  outline: 1px dashed red;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
}
.back {
  position: fixed;
  right: 100px;
  bottom: 100px;
}
.b {
  width: 50px;
  height: 50px;
  background-color: lightcyan;
}

2、z-index

层的叠放顺序的特点，哪个层后写，那这个层在叠放时就在上面（此时他们的z-index:0)

            ● z-index值表示谁压着谁。数值大的压盖住数值小的。

            ● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

            ● z-index值没有单位，就是一个正整数。默认的z-index值是0。

            ● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

<div class="parent"> 
  <div class="son son1">son1</div> 
  <div class="son son2">son2</div> 
  <div class="son son3">son3</div> 
</div>

css样式：

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 800px;
  height: 800px;
  background-color: lavenderblush;
  outline: 1px dashed red;
  margin: 10px auto;
  position: relative;
}
.son {
  width: 300px;
  height: 300px;
  position: absolute;
}
.son1 {
  background-color: pink;
  top: 50px;
  left: 50px;
}
.son2 {
  background-color: lightgreen;
  top: 100px;
  left: 100px;
}
.son3 {
  background-color: lightcoral;
}

代码演示：

可以看到此时是son3在最上层，当我们在son1添加z-index: 1;时，son1显示的优先级将会高于其他层。

.son1{ 
  background-color: pink; 
  top: 50px; 
  left: 50px; 
  z-index: 1; 
}

代码演示：

3、让盒子分别做自己位置的微调，如果子元素在父元素中进行相对定位微调，定位点是上一个盒子的左下角

<div class="parent">
  <div class="son son1">son1</div>
  <div class="son son2">son2</div>
  <div class="son son3">son3</div> 
</div>

css样式：

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 800px;
  height: 800px;
  background-color: lavenderblush;
  outline: 1px dashed red;
  margin: 10px auto;
}
.son {
  width: 300px;
  height: 300px;
  position: relative;
  ;
}
/* 让盒子分别做自己位置的微调 */
.son1 {
  background-color: pink;
  top: 50px;
  left: 50px;
}
.son2 {
  background-color: lightgreen;
  top: 100px;
  left: 100px;
}
.son3 {
  background-color: lightcoral;
  left: 150px;
  top: 50px;
}

代码演示：

4、z-index的从父现象

（1）当两盒盒子的子元素重叠时，给子元素添加z-index，值大的在上面。

<div class="box box1"> 
  <div class="son son1">son1</div> 
  </div> <div class="box box2"> 
  <div class="son son2">son2</div> 
</div>

CSS样式：

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 300px;
  height: 300px;
}
.box1 {
  background-color: blue;
  position: relative;
}
.box2 {
  background-color: red;
  position: relative;
}
.son {
  width: 100px;
  height: 100px;
}
.son1 {
  background-color: green;
  position: absolute;
  left: 400px;
  top: 240px;
  z-index: 15;
}
.son2 {
  background-color: pink;
  position: absolute;
  left: 420px;
  top: 0px;
  z-index: 20;
}

代码演示：

（2）在son2的z-index值比son1大的基础上，给他们的父亲box1，box2添加z-index。使box1>box2，这时son1在son2上面

css样式：

.box1{ 
background-color:blue; 
position: relative; 
z-index: 10; 
} 
.box2{ 
background-color: red; 
position: relative;
z-index: 5; 
}

代码演示：