一、定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
语法:
选择器 { z-index: 1; }
- 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
text-align: center;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</body>
</html>
上面是标准流正常三个盒子的排列方式,如果此时给三个盒子都加上固定定位,会发生什么情况呢??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
/* 给三个盒子都加上固定定位 */
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
text-align: center;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</body>
</html>
发现三个盒子重叠在一起了,并且最后面的盒子显示在最上面,如果此时想要指定的盒子box2显示在最上面,则需要给box2添加z-index属性
.box2{
background-color: green;
z-index: 1;
}
效果如图:
二、绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto
水平居中,但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;
:让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;
:让盒子向左移动自身宽度的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
/* 加了绝对定位的盒子实现水平居中 */
position:absolute;
top: 0;
left: 50%;
margin-left: -400px;
width: 800px;
height: 400px;
background-color: #ce4433;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、定位特殊特性
绝对定位和固定定位也和浮动类似。
1、行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
四、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
五、绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位) 会压住下面标准流所有的内容。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字环绕效果</title>
<style>
.box img{
float: right;
}
</style>
</head>
<body>
<div class="box">
<img src="https://bkimg.cdn.bcebos.com/pic/29381f30e924b89950645a3d63061d950a7bf65f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="">
<p>德怀恩·韦德(Dwyane Wade),1982年1月17日出生于美国伊利诺伊州芝加哥,前美国职业篮球运动员,司职得分后卫,绰号“闪电侠”(The Flash)。</p>
<p>德怀恩·韦德在2003年NBA选秀中于首轮第五顺位被迈阿密热火队选中,从而进入NBA。2006年,韦德夺得生涯第一座NBA总冠军,并且荣膺NBA历史上第五年轻总决赛MVP(FMVP)。2008年,韦德代表美国男篮夺得北京奥运会金牌。2011-14年间,韦德帮助热火队四次进入NBA总决赛,并在中间在2012-13年2个赛季取得连冠。2016年7月7日,韦德加盟芝加哥公牛队。 [95] 2017年9月27日,韦德加盟克利夫兰骑士队。2018年2月9日,韦德重回热火队。韦德的职业生涯在2005-16年连续12次入选NBA全明星阵容并在2010年荣膺NBA全明星MVP,8次入选NBA最佳阵容(2次一阵,3次二阵,3次三阵),3次入选NBA最佳防守阵容二阵,2009年荣膺NBA得分王,2006-07年连续2次夺得NBA全明星技巧挑战赛冠军,2018-19赛季第13次入选NBA全明星阵容。</p>
<p>2019年4月11日,韦德在完成职业生涯的最后一场比赛后宣布退役。2020年2月23日,热火队为韦德举办了3号球衣退役仪式。 [3] 2021年4月,韦德成为犹他爵士队股东。</p>
<p>德怀恩·韦德擅长欧洲步(迷踪步),突破犀利,喜欢背身单打,年轻时是NBA联盟中运球过人速度最快的球员之一。</p>
</div>
</body>
</html>