CSS的定位(position)使用对于我们布局有很好的作用,定位分为static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和sticky(粘性定位)。元素可以使用top、bottom、right、left等属性定位。
1、默认static
默认就是静态定位, 写不写都一样,原来加定位的盒子, 不想定位了, 加上这个就可以了(清除定位)
2、相对定位relative
相对于盒子原来的位置进行偏移,原本所在位置不变,没有脱离标准流,一般会用来作为绝对定位的父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
/* 相对于盒子原来的位置进行偏移,原本所在位置不变, */
position: relative;/*相对定位*/
top: 50px;
left: 100px;
}
.box2 {
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2"></div>
</body>
</html>
3、绝对定位 absolute
绝对位置,绝对定位相当于设置了定位属性(除static)的父元素偏移,如果没有就相当于html元素偏移,会脱离文档流,不在占据空间 (子绝父相 父元素发生变化子元素跟着发生变化), 如果元素的父级没有设置定位属性,则根据 body 元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,0位默认值,大的在上面,可以有负值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示</title>
<style>
.box {
width: 300px;
height: 300px;
border: 2px solid tomato;
position: relative;/*绝对定位*/
}
.box1 {
width: 70px;
height: 70px;
background-color: red;
position: absolute;/*绝对定位,会脱离文档流*/
top: 20px;
left: 30px;
}
.box2 {
width: 90px;
height: 90px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
z-index
使用z-index改变堆叠顺序,数值越大,堆叠在越上方
.box1 {
width: 400px;
height: 400px;
margin: auto;
background-color: tomato;
position: relative;/*相对定位*/
}
/* 使用z-index改变堆叠顺序,数值越大,堆叠在越上方 */
.box2 {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;/*绝对定位*/
top: 50px;
left: 20px;
z-index: 3;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;/*绝对定位*/
top: 60px;
left: 30px;
z-index: 2;
}
.box4 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;/*绝对定位*/
top: 70px;
left: 40px;
z-index: 1;
}
4、flxed固定定位
固定位置,固定定位相对于浏览器窗口的固定位置,不会随用户的滚动而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示</title>
<style>
body{
height: 2000px;
}
.box {
width: 400px;
height: 50px;
background-color: chartreuse;
position: fixed;/*固定定位*/
top: 10px;
left: 200px;
}
.box1 {
width: 70px;
height: 70px;
background-color: red;
margin: auto;
}
.box2 {
width: 90px;
height: 90px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
5、粘性定位 sticky
粘性定位 依赖于用户的滚动,在position:relative;与position:fixed;之间切换
使用条件
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
<!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>
body {
height: 2000px;
}
.box {
width: 200px;
height: 300px;
background-color: aqua;
}
.box1 {
width: 500px;
height: 50px;
line-height: 50px;
position: sticky;/*粘性定位*/
/* bottom: 0; */
top: 22px;
left: 50px;
background-color: tomato;
color: #FFF;
text-align: center;
}
.box2 {
width: 1000px;
height: 500px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1">sticky(粘性定位)</div>
<div class="box2">box2</div>
</body>
</html>