二、定位
层级布局： 定位 position
position属性值：
- static: 静态定位 文本默认的定位方式，相当于没有定位
- absolute: 绝对定位
- relative: 相对定位 相对于自己原来的位置进行定位
- fixed: 绝对定位 相对于浏览器视口
- sticky:粘性定位
定位的位置调节：
- top
- bottom
- left
- right
初始位置：
2.1 relative
参照物：自己原来的位置
是否脱离文档流： 不脱离文档流
执行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: orange;
}
.box2 {
background-color: pink;
/* 定位方式：相对定位 */
position: relative;
/* 调节位置 */
top: 50px;
left: 100px;
}
.box3 {
background-color: purple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
结果：
2.2 fixed
参照物： 浏览器视口
是否脱离文档流：脱离文档流
执行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: orange;
}
.box2 {
background-color: pink;
/* 定位方式：绝对定位相对于视口 */
position: fixed;
/* 调节位置 */
bottom: 50px;
right: 50px;
}
.box3 {
background-color: purple;
}
</style>
</head></
最低0.47元/天 解锁文章
4562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
