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;
}

代码演示:

202101091610160462918618

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

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

代码演示:

202101091610160576159075

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;
}

代码演示:

202101091610161348176822

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;
}

代码演示:

202101091610161604206359

(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; 
}

代码演示:

202101091610161798655228