<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
/* 相对定位
相对自身定位
通常配合绝对定位使用
*/
.box{
position: relative;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
.div1{
/* 绝对定位
1.相对浏览器窗口定位
2.父级有定位属性时,相对父级盒子定位
3.逐级往上找,相对碰到的第一个有定位属性的父盒子定位,
如果没有,就相对浏览器定位
*/
/* 子绝父相
为了让绝对定位有定位点,一般会给他的父盒子加相对定位
*/
position: relative;
top: 0;
left: 0;
/*
z-index
设置堆叠顺序的
1.默认是z-index:1
2.数字越大越靠前显示
3.数字越小比如负数越靠后显示
*/
}
.div2{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
.box1{
height: 10000px;
}
.box2{
/* 固定定位
相对浏览器窗口定位,不随页面滚动改变位置
*/
position: fixed;
right: 40px;
bottom: 40px;
width: 60px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
.box2{
/* 粘性定位
偏移量同相对定位
页面滚动时,滚动到顶部,直接吸顶
*/
position: sticky;
top: 100px;
left: 0;
}
.box6{
width: 10px;
height: 100000px;
}
</style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box1">333</div>
<div class="box1">444</div>
<div class="box1">555</div>
<div class="box6">666</div>
</body>
</html>
css定位
于 2023-07-18 17:55:20 首次发布