这里是
CSS中五种常见的定位
方式的介绍和用法：
1.
static（静态定位）：
元素的位置遵循正常的文档流，不受top、bottom、left、right影响。
2. re
lative（相对定位）：
元素的位置相对于它在文档流中的初始位置进行定位，可以通过top、bottom、left、right属性进行微调。
3.
absolute（绝对定位）：
元素的位置相对于最近的已定位祖先
元素（position属性不为
static）进行定位，如果没有已定位的祖先
元素，则相对于文档的body
元素进行定位。
4.
fixed（固定定位）：
元素的位置相对于浏览器窗口进行定位，不随页面滚动而改变。
5. sticky（粘性定位）：
元素在跨越特定阈值前为相对定位，之后为固定定位。可以通过top、bottom、left、right属性进行微调。
下面是一个例子，展示了这五种定位
方式的用法：
```html
<!DOCTYPE html>
<html>
<head>
<title>定位
方式示例</title>
<style type="text/
css">
.container {
height: 300px;
position: re
lative;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: red; color: white;
text-align: center;
line-height: 100px;
font-size: 20px;
}
.
static {
position:
static;
}
.re
lative {
position: re
lative;
top: 50px;
left: 50px;
}
.
absolute {
position:
absolute;
top: 50px;
left: 50px;
}
.
fixed {
position:
fixed;
top: 50px;
left: 50px;
}
.sticky {
position: sticky;
top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box
static">
static</div>
<div class="box re
lative">re
lative</div>
<div class="box
absolute">
absolute</div>
<div class="box
fixed">
fixed</div>
<div class="box sticky">sticky</div>
</div>
</body>
</html>
```
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
