第7章 CSS定位与背景艺术

让元素挣脱文档流的束缚 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第7章

🎯 学习目标

知识目标

  • 掌握position五种取值：static/relative/absolute/fixed/sticky
  • 理解z-index与层叠上下文
  • 掌握background家族与linear-gradient渐变

能力目标

  • 能制作带悬浮徽章的渐变卡片
  • 能正确使用相对/绝对定位的组合套路
  • 能用渐变创造高级背景效果

德育目标

  • 培养克制的设计观：定位是工具不是炫技
  • 理解层级秩序的规则意识

教学重点

  • relative+absolute经典组合
  • fixed与sticky场景
  • linear-gradient语法

教学难点

  • absolute的包含块判定规则
  • z-index失效的层叠上下文原因

💻 实例演示1个实例 · 可在线运行

▶ 渐变卡片与悬浮徽章

综合运用relative+absolute与渐变的商品卡片，徽章精确悬浮于右上角。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，观察两个徽章的位置
  2. 用开发者工具找到.badge，查看其absolute定位值
  3. 将.card的position:relative注释掉，观察徽章飞向何处
  4. 修改top/right数值，微调徽章位置
  5. 为.card添加z-index:1实验层叠关系
  6. 修改渐变角度135deg为90deg观察变化

效果观察点

  • 徽章超出卡片边界（overflow: visible）
  • absolute相对于relative的卡片定位
  • 删除relative后徽章相对body定位——经典踩坑演示
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渐变卡片与悬浮徽章</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; background: #f2f6f8;
         display: flex; justify-content: center; gap: 30px; padding: 50px 16px; flex-wrap: wrap; }
  .card { position: relative; width: 260px; border-radius: 16px; overflow: visible;
          background: linear-gradient(135deg, #123a52, #1b5a7a); color: #fff;
          padding: 28px 22px; box-shadow: 0 10px 30px rgba(18,58,82,.3); }
  .badge { position: absolute; top: -14px; right: -14px;
           background: linear-gradient(135deg, #c77728, #e09a4a);
           padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: bold;
           box-shadow: 0 4px 10px rgba(199,119,40,.5); z-index: 2; }
  .card h3 { margin: 0 0 10px; color: #38d6c4; }
  .price { font-size: 28px; font-weight: bold; }
  .card2 { background: linear-gradient(160deg, #0f8c7f, #38d6c4); }
  .tag { position: absolute; bottom: 16px; right: 16px; background: rgba(255,255,255,.2);
         padding: 4px 12px; border-radius: 12px; font-size: 12px; }
</style>
</head>
<body>
  <div class="card">
    <div class="badge">热卖</div>
    <h3>前端入门课</h3>
    <p>HTML+CSS零基础通关</p>
    <div class="price">¥199</div>
  </div>
  <div class="card card2">
    <div class="badge">新课</div>
    <h3>JavaScript实战</h3>
    <p>从入门到竞赛水平</p>
    <div class="price">¥299</div>
    <div class="tag">右下角标签</div>
  </div>
</body>
</html>

📋 实习任务书

任务目标：独立完成带角标徽章的渐变卡片组件，掌握定位组合套路

任务内容与评分
任务1：用linear-gradient制作卡片背景（20分）
任务2：relative+absolute实现右上角徽章（30分）
任务3：制作fixed"回到顶部"按钮（15分）
任务4：制作sticky栏目标题（15分）
任务5：写出absolute包含块的判定规则（20分）

自我评价

📚 课后作业与预习