WEB前端网页设计 CSS Position（定位）
在CSS中，position属性用于定义元素的定位方式。这个属性有四个值：static、relative、absolute和fixed。
static：默认值，无特殊定位，元素遵循正常文档流。relative：相对定位，元素相对于其正常位置进行定位。absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位。fixed：固定定位，元素相对于浏览器窗口进行定位。
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.static {
position: static;
border: 3px solid #73AD21;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
left: 20px;
border: 3px solid #424242;
padding: 10px;
margin: 10px;
}
.absolute {
position: absolute;
top: 10px;
right: 10px;
border: 3px solid #FF0000;
padding: 10px;
margin: 10px;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid #0000FF;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="static">
<p>这是一个静态定位的元素。</p>
</div>
<div class="relative">
<p>这是一个相对定位的元素。</p>
</div>
<div class="absolute">
<p>这是一个绝对定位的元素。</p>
</div>
<div class="fixed">
<p>这是一个固定定位的元素。</p>
</div>
</body>
</html>在这个例子中，我们创建了四个div元素，每个都使用了不同的position值。每个div都有自己的文本内容说明其定位方式。通过调整浏览器窗口的大小或滚动页面，可以看到fixed定位的元素始终固定在视窗的右下角，而absolute定位的元素相对于最近的非static定位的祖先元素（在这个例子中是视窗）进行定位。
评论已关闭