博学谷 - CSS笔记15 - 定位叠放次序与拓展
作者:互联网
1.定位叠放次序 z-index
语法:
选择器 { z-index: 1; }
- 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
demo:
div{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
top: 50px;
left: 50px;
background-color: aquamarine;
z-index: 1;
}
.box2{
top: 100px;
left: 100px;
background-color:blueviolet;
}
.box3{
top: 150px;
left: 150px;
background-color:blue;
}
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
效果:
2.绝对定位的盒子居中
- 加了绝对定位的盒子不能通过 margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。
- left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
- margin-left: -100px;:让盒子向左移动自身宽度的一半。
demo:
div{
width: 500px;
height: 500px;
background-color:blue;
position: absolute;
left: 50%;
margin-left: -250px;
}
效果:
3.定位特殊特性
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
demo:
div{
background-color: aqua;
position: absolute;
left: 200px;
top: 200px;
}
span{
background-color: yellow;
position: absolute;
height: 200px;
width: 200px;
}
<div>块级元素</div>
<span>行内元素</span>
效果:
4.脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
demo:
div{
height: 100px;
width: 100px;
}
.box1{
position: absolute;
margin-bottom: 100px;
background-color: aqua;
}
.box2{
position: absolute;
margin-top: 100px;
background-color: burlywood;
}
<div class="box1"></div>
<div class="box2"></div>
效果:
5.绝对定位(固定定位)会完全压住盒子
- 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),但是绝对定位(固定定位)会压住下面标准流所有的内容。
- 浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
浮动环绕demo:
div{
height: 300px;
width: 300px;
background-color: antiquewhite;
word-break:break-all;
}
img{
float: right;
}
<div>
11111111111111111111111111111111111111111111111111
22222222222222222222222222222222222222222222222222
<img src="./t1.png" alt="#">
33333333333333333333333333333333333333333333333333
</div>
浮动环绕效果:
定位覆盖demo:
div{
height: 300px;
width: 300px;
background-color: antiquewhite;
word-break:break-all;
}
img{
position: absolute;
}
<div>
11111111111111111111111111111111111111111111111111
22222222222222222222222222222222222222222222222222
<img src="./t1.png" alt="#">
33333333333333333333333333333333333333333333333333
</div>
定位覆盖效果:
6.文章参考链接
a. https://www.boxuegu.com/
b. https://www.cnblogs.com/shcrk/p/9311273.html
c. https://blog.csdn.net/tiandaochouqin_1/article/details/88023417
d. https://www.w3school.com.cn/cssref/pr_word-break.asp
标签:定位,15,color,100px,background,盒子,叠放,CSS,left 来源: https://blog.csdn.net/hecr_mingong/article/details/117249785