5月18日笔记
定位
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 定位 · 五种方式演示</title>
<style>
/* ----- 全局样式 ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
background: #f4f8fc;
padding: 2rem 1.5rem;
color: #0b1e2e;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: #ffffff;
border-radius: 2rem;
padding: 2rem 2rem 2.5rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}
h1 {
font-weight: 600;
font-size: 2rem;
margin-bottom: 0.2rem;
}
.sub {
color: #5c738a;
font-size: 0.95rem;
margin-bottom: 2rem;
border-left: 4px solid #b6ccdf;
padding-left: 1rem;
}
/* ----- 每个定位示例卡片 ----- */
.demo-card {
background: #fafdff;
border: 1px solid #e4edf6;
border-radius: 1.2rem;
padding: 1.2rem 1.5rem 1.8rem;
margin-bottom: 2rem;
position: relative;
}
.demo-card h2 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.3rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.demo-card .badge {
font-size: 0.7rem;
background: #dce8f2;
padding: 0.1rem 0.8rem;
border-radius: 30px;
font-weight: 500;
color: #1f3a5f;
}
.demo-card .desc {
color: #5c738a;
font-size: 0.9rem;
margin-bottom: 1rem;
border-left: 3px solid #d0dfec;
padding-left: 0.8rem;
}
/* ----- 定位演示容器 ----- */
.position-container {
position: relative; /* 作为 absolute 的参照 */
background: #eef3f9;
border-radius: 0.8rem;
padding: 1.5rem;
min-height: 200px;
border: 2px dashed #b6ccdf;
margin-top: 0.5rem;
overflow: visible;
}
.pos-box {
width: 120px;
height: 80px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
color: #fff;
font-size: 0.9rem;
transition: all 0.3s;
}
/* 不同颜色 */
.box-red { background: #d45c5c; }
.box-blue { background: #3d7ca3; }
.box-green { background: #3f8b6a; }
.box-purple { background: #8b6bb0; }
.box-orange { background: #d49a4a; }
/* ----- 具体定位演示 ----- */
/* 1. static (默认) - 无特殊样式，正常流 */
.static-demo .box-red {
position: static;
}
/* 2. relative */
.relative-demo .box-blue {
position: relative;
left: 40px;
top: 20px;
}
/* 3. absolute - 参照最近的已定位祖先（此处是 .position-container） */
.absolute-demo .position-container {
position: relative; /* 确保参照 */
min-height: 240px;
}
.absolute-demo .box-green {
position: absolute;
bottom: 20px;
right: 20px;
width: 140px;
height: 90px;
}
.absolute-demo .box-purple {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 70px;
}
/* 4. fixed - 相对于视口，用一个小示例展示滚动效果 */
.fixed-demo .position-container {
min-height: 280px;
position: relative; /* 不影响 fixed */
}
.fixed-demo .box-orange {
position: fixed;
bottom: 30px;
right: 30px;
width: 150px;
height: 60px;
z-index: 999;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* 为了演示 fixed，我们添加一个滚动条提示 */
.fixed-demo .scroll-notice {
background: #f0f6fd;
padding: 0.5rem 1rem;
border-radius: 0.6rem;
font-size: 0.8rem;
color: #2c4a6e;
margin-top: 0.5rem;
}
/* 5. sticky - 粘性定位 */
.sticky-demo .position-container {
min-height: 300px;
overflow-y: auto; /* 让容器可滚动 */
max-height: 280px;
background: #f0f6fd;
}
.sticky-demo .sticky-content {
height: 600px; /* 制造滚动空间 */
padding-top: 20px;
}
.sticky-demo .box-sticky {
position: sticky;
top: 20px; /* 粘在容器顶部20px */
background: #4a7a9c;
color: #fff;
width: 100%;
height: 60px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.sticky-demo .sticky-text {
padding: 0.5rem;
background: #fff;
border-radius: 0.6rem;
margin-top: 10px;
}
/* 辅助间距 */
.spacer {
height: 10px;
}
.mt-2 { margin-top: 1rem; }
/* 响应式 */
@media (max-width: 600px) {
.container { padding: 1.2rem; }
.pos-box { width: 80px; height: 60px; font-size: 0.7rem; }
.absolute-demo .box-green { width: 100px; height: 70px; }
.absolute-demo .box-purple { width: 80px; height: 60px; }
}
</style>
</head>
<body>
<div class="container">
<h1>📍 CSS 定位 · 五种方式</h1>
<div class="sub">静态 · 相对 · 绝对 · 固定 · 粘性 —— 观察每个块的位置变化</div>
<!-- 1. 静态定位 (static) -->
<div class="demo-card static-demo">
<h2>1. 静态定位 <span class="badge">static</span></h2>
<div class="desc">默认值，元素按正常文档流排列，top/left/right/bottom 无效。</div>
<div class="position-container">
<div class="pos-box box-red">static</div>
<div class="pos-box box-blue" style="background:#5b8db8;">static</div>
<div class="pos-box box-green" style="background:#4a9b7a;">static</div>
</div>
</div>
<!-- 2. 相对定位 (relative) -->
<div class="demo-card relative-demo">
<h2>2. 相对定位 <span class="badge">relative</span></h2>
<div class="desc">相对于自身原本位置偏移，不脱离文档流，周围元素不受影响。</div>
<div class="position-container">
<div class="pos-box box-red">static</div>
<div class="pos-box box-blue">relative<br /><span style="font-size:0.7rem;">left:40px; top:20px;</span></div>
<div class="pos-box box-green">static</div>
</div>
</div>
<!-- 3. 绝对定位 (absolute) -->
<div class="demo-card absolute-demo">
<h2>3. 绝对定位 <span class="badge">absolute</span></h2>
<div class="desc">脱离文档流，相对于最近的已定位祖先（此处为灰色容器）定位。如果没有，则相对于初始包含块。</div>
<div class="position-container" style="position:relative; min-height:240px;">
<div class="pos-box box-green" style="position:absolute; bottom:20px; right:20px; width:140px; height:90px;">absolute<br />右下</div>
<div class="pos-box box-purple" style="position:absolute; top:30px; left:30px; width:100px; height:70px;">absolute<br />左上</div>
<div class="pos-box box-red" style="background:#a8cce3; color:#1a2b3e; position:static; opacity:0.6;">static (参考)</div>
</div>
</div>
<!-- 4. 固定定位 (fixed) -->
<div class="demo-card fixed-demo">
<h2>4. 固定定位 <span class="badge">fixed</span></h2>
<div class="desc">相对于视口定位，脱离文档流，滚动时位置不变。下方橙色块固定在右下角。</div>
<div class="position-container" style="position:relative; min-height:200px;">
<div class="pos-box box-red">static</div>
<div class="pos-box box-blue">static</div>
<!-- fixed 元素会被固定在视口，但为了演示，我们将其放在容器内并标记 -->
<div class="pos-box box-orange" style="position:fixed; bottom:30px; right:30px; width:150px; height:60px; z-index:999; box-shadow:0 8px 20px rgba(0,0,0,0.15);">
fixed<br /><span style="font-size:0.7rem;">视口右下</span>
</div>
</div>
<div class="scroll-notice">⬆️ 滚动页面，橙色块始终固定在右下角 (fixed)</div>
</div>
<!-- 5. 粘性定位 (sticky) -->
<div class="demo-card sticky-demo">
<h2>5. 粘性定位 <span class="badge">sticky</span></h2>
<div class="desc">根据滚动位置在 relative 和 fixed 之间切换。在容器内滚动时，粘在顶部。</div>
<div class="position-container" style="overflow-y:auto; max-height:250px; background:#f0f6fd;">
<div style="height:400px; padding-top:10px; position:relative;">
<div class="box-sticky" style="position:sticky; top:10px; background:#4a7a9c; color:#fff; width:100%; height:50px; border-radius:0.6rem; display:flex; align-items:center; justify-content:center; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,0.08);">
🧷 粘性元素 (sticky top:10px)
</div>
<div style="padding:0.8rem; background:#fff; border-radius:0.6rem; margin-top:10px;">
<p>滚动这个容器，粘性元素会粘在顶部 10px 处，直到滚动超出其父容器范围。</p>
<p style="margin-top:0.5rem; color:#5c738a;">👇 继续滚动查看更多内容……</p>
<div style="height:150px; background:#eaf1fa; border-radius:0.6rem; margin-top:0.5rem; display:flex; align-items:center; justify-content:center; color:#4f657c;">底部内容</div>
</div>
</div>
</div>
</div>
<div style="margin-top:2rem; font-size:0.85rem; color:#5c738a; text-align:center; border-top:1px solid #e4edf6; padding-top:1.2rem;">
💡 提示：固定定位和粘性定位需要滚动页面或容器才能看到效果。所有定位均符合 CSS 规范。
</div>
</div>
<!-- 修复用户原代码中的错误（提供给用户参考，但此处已完全重写） -->
<!-- 原代码错误：.parent 中 'solid 10px solid red' 应为 'border:10px solid red;'，且缺少闭合等 -->
<!-- 我们在此重新实现了一个完整的定位演示，涵盖五种定位方式 -->
</body>
</html>
效果图：
浙公网安备 33010602011771号