第05章 CSS 定位布局
CSS 定位布局主要是通过 position 属性来实现的，它有以下几个值：
static：默认值，没有定位。relative：相对定位，相对于其正常位置进行定位。absolute：绝对定位，相对于最近的非static定位的祖先元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
left: 30px;
top: 20px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 20px;
}
.fixed {
position: fixed;
left: 50px;
top: 50px;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 粘性定位的位置 */
background-color: yellow; /* 粘性定位的背景颜色 */
border: 2px solid black; /* 边框 */
padding: 50px; /* 内边距 */
font-size: 20px; /* 字体大小 */
}
</style>
</head>
<body>
<p>相对定位:</p>
<div class="relative">我是相对定位的元素。</div>
<p>绝对定位:</p>
<div class="absolute">我是绝对定位的元素。</div>
<p>固定定位:</p>
<div class="fixed">我是固定定位的元素。</div>
<p>粘性定位:</p>
<div class="sticky">我是粘性定位的元素。</div>
</body>
</html>在这个例子中，我们创建了四个 div 元素，每个元素都应用了不同的定位方式。其中，sticky 类用于演示粘性定位，当用户滚动页面时，该元素会根据用户的滚动位置在相对和固定定位之间切换。其余三个类展示了常规的定位用法。
评论已关闭