<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
position: relative;
width: 80%;
height: 300px;
margin: 30px auto;
background-color: #f5f5f5;
border: 2px dashed #333;
padding: 20px;
}
.relative-box {
position: relative;
left: 50px;
top: 20px;
width: 200px;
height: 100px;
background-color: rgba(173, 216, 230, 0.7);
border: 2px solid blue;
}
.absolute-box {
position: absolute;
right: 30px;
top: 50px;
width: 150px;
height: 80px;
background-color: rgba(240, 128, 128, 0.7);
border: 2px solid red;
}
.fixed-box {
position: fixed;
left: 20px;
top: 20px;
width: 120px;
height: 60px;
background-color: rgba(144, 238, 144, 0.7);
border: 2px solid green;
text-align: center;
line-height: 60px;
}
.sticky-box {
position: sticky;
top: 10px;
width: 100%;
height: 50px;
background-color: rgba(255, 255, 0, 0.7);
border: 2px solid orange;
text-align: center;
line-height: 50px;
margin-top: 20px;
}
.long-content {
height: 1500px;
margin-top: 30px;
padding: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="fixed-box">固定定位</div>
<h1>CSS定位方式演示</h1>
<div class="sticky-box">粘性定位(Sticky)</div>
<div class="container">
<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<p>这是一个相对定位的容器,包含相对定位和绝对定位的元素。</p>
</div>
<div class="long-content">
<p>向下滚动页面,观察不同定位元素的行为...</p>
<p>固定定位元素始终在窗口固定位置。</p>
<p>粘性定位元素在到达指定位置时会粘住。</p>
</div>
</body>
</html>
|