09. Postion
November 11, 2023About 5 min
Position
- 定位（position）
- 定位式以各种更加高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
可选值：
static 默认值，元素式静止的，没有开启定位
relative 开启相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
Relative Position
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
/*
- 相对定位：
- 当元素的position开哦其relative，开启相对定位
- 特点：
1. 若不设置偏移量，元素位置不会发生任何变化
2. 相对定位式参考元素在文档流中的位置进行定位的
3. 相对定位会提升元素的层级
4. 相对定位不会使元素脱离文档流
5. 相对定位不会改变元素的性质（块/行内）
偏移量（offset）
top
bottom
left
right
*/
.box1{
width: 100px;
height:100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: relative;
top: 50px;
/* bottom: 100px; */
left: 100px;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>Absolute Position
basic
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
/*
- 绝对定位：
- 当元素的position开启absolute ，开启绝对定位
- 特点：
1. 开启绝对定位，若不设置偏移量，元素位置不会发生变化
2. 元素从文档流中脱离
3. 绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
4. 绝对定位回使元素提升一个层级
5. 绝对定位元素使相对于包含块进行定位
包含块（containing block）：
-- 正常情况下：
包含块使离当前元素最近的祖先块元素
-- 绝对定位的包含块：
包含块使离当前元素最近的开启定位的祖先元素，若所有祖先元素均未开启定位，则相对于整个网页（根元素）
-- html（根元素、初始包含块）
偏移量（offset）
top
bottom
left
right
*/
.box1{
width: 100px;
height:100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
/* top: 50px; */
/* bottom: 100px; */
/* left: 100px; */
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>layout
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
/*
水平布局：
包含块宽度 = left + margin-left + border-left+padding-left + width + padding-right + border-right + margin-right + right
当开启了绝对定位后：
水平方向的布局等式就需要添加left 和right两个值
此时规则和之前使一样，知识多了以上两个值
当发生过度约束
如果9搁置中没有auto，则自动调整right值以使等式满足
若有auto，则自动调整auto的值以使等式成立
可设置auto的值：
margin width left right
应为left和right的值默认使auto，所以如果不知道left和right则等式不满足使，会自动调整这两个值
垂直方向布局的等式也必须满足
包含块高度 = top + margin-top/bottom + padding-top/bottom + border-top/bottom + height
*/
.box1{
width: 500px;
height:500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
/* top: 50px; */
/* bottom: 100px; */
/* left: 100px; */
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.box3{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
/* top: 50px; */
/* bottom: 100px; */
/* left: 100px; */
/* left: 0;
right: 0;
top: 0;
bottom: 0; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>Fixed Position
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
/*
- 固定定位
- 当元素的position开启fixed，开启固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
- 特点：
1. 开启绝对定位，若不设置偏移量，元素位置不会发生变化
2. 元素从文档流中脱离
3. 绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
4. 绝对定位回使元素提升一个层级
5. 绝对定位元素使相对于视口进行定位
固定定位的元素不会随网页滚动而滚动
偏移量（offset）
top
bottom
left
right
*/
.box1{
width: 100px;
height:100px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
/* top: 50px; */
/* bottom: 100px; */
/* left: 100px; */
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>The layer position
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
/*
对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素层级越高，层级越高越优先显示
* 如果元素层级一样，则优先显示靠下的元素
* 祖先元素永远不会盖住后代元素
*/
.box1{
width: 100px;
height:100px;
background-color: #bfa;
position: relative;
z-index: 3;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50px;
top: 50px;
}
.box3{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 100px;
top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
position: relative;
left: 150px;
top: 150px;
z-index: 3;
}
.box5{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">
4
<div class="box5">5</div>
</div>
</body>
</html>