<!DOCTYPE html>
<html lang="ch">
<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>
/*
固定定位的特点跟绝对定位几乎一样,只有最后一项不同:
1.开启绝对定位后,如果不设置偏移量,元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.固定定位元素是相对于浏览器视口进行定位的
*/
div {
font-size:70px;
}
.box1, .box2, .box3 {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
position: fixed;
bottom: 0;
right: 0;
}
.box3 {
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3" style="height: 9999px;">3</div>
</body>
</html>
54固定定位
最新推荐文章于 2023-07-06 14:04:01 发布