固定定位
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;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果