编程马·菜鸟教程

Appearance

定位布局（精准控制元素位置，核心难点） ​

12.1 定位属性（position） ​

语法 ​

css
元素 {
  position: 定位类型;
}

常用值 ​

  • static：静态定位（默认值）
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
  • sticky：粘性定位

12.2 相对定位（relative） ​

定义 ​

相对于元素原来的位置进行定位，不脱离标准流。

特点 ​

  • 相对于自身原来的位置移动
  • 不脱离标准流
  • 原来的位置仍然保留

示例 ​

css
.relative-box {
  position: relative;
  top: 20px;    /* 向下移动20px */
  left: 30px;   /* 向右移动30px */
  background-color: #e3f2fd;
}

12.3 绝对定位（absolute） ​

定义 ​

相对于最近的已定位祖先元素进行定位，脱离标准流。

特点 ​

  • 相对于最近的已定位祖先元素
  • 脱离标准流
  • 如果没有已定位祖先，则相对于文档定位

示例 ​

css
.parent {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #f5f5f5;
}

.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
  width: 100px;
  height: 100px;
  background-color: #ffccbc;
}

12.4 固定定位（fixed） ​

定义 ​

相对于浏览器窗口进行定位，脱离标准流。

特点 ​

  • 相对于浏览器窗口
  • 脱离标准流
  • 滚动页面时位置不变

示例 ​

css
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  z-index: 1000;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

12.5 定位偏移量 ​

属性 ​

  • top：距离顶部的距离
  • right：距离右侧的距离
  • bottom：距离底部的距离
  • left：距离左侧的距离

示例 ​

css
.positioned-box {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}

12.6 z-index属性 ​

定义 ​

控制元素的层级，解决重叠问题。

语法 ​

css
元素 {
  z-index: 数值;
}

特点 ​

  • 数值越大，层级越高
  • 只对定位元素有效
  • 可以是正数或负数

示例 ​

css
.box1 {
  position: absolute;
  z-index: 1;
  background-color: red;
}

.box2 {
  position: absolute;
  z-index: 2;
  background-color: blue;
}

12.7 新手避坑 ​

绝对定位的父元素必须设置定位 ​

错误示例：

css
.parent {
  /* 没有设置position */
  width: 400px;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 会相对于文档定位，而不是parent */
}

正确示例：

css
.parent {
  position: relative; /* 或其他定位值 */
  width: 400px;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  /* 相对于parent定位 */
}

12.8 实战：制作固定导航栏、回到顶部按钮、弹出提示框 ​

实战目标 ​

使用定位布局创建固定导航栏、回到顶部按钮和弹出提示框。

实战步骤 ​

  1. 创建HTML文件：
html
<!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>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <!-- 固定导航栏 -->
  <header class="fixed-header">
    <nav class="nav">
      <div class="logo">Logo</div>
      <ul class="nav-list">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- 主要内容 -->
  <main class="main-content">
    <h1>CSS定位布局实战</h1>
    <p>向下滚动页面，观察固定导航栏和回到顶部按钮的效果。</p>
    
    <!-- 弹出提示框示例 -->
    <div class="tooltip-container">
      <button class="tooltip-btn" id="showTooltip">显示提示框</button>
      <div class="tooltip" id="tooltip">
        <h3>提示信息</h3>
        <p>这是一个绝对定位的提示框。</p>
        <button class="close-btn" id="closeTooltip">关闭</button>
      </div>
    </div>
    
    <!-- 模拟长内容 -->
    <div class="long-content">
      <p>这是模拟的长内容...</p>
      <p>继续滚动...</p>
      <p>更多内容...</p>
      <p>滚动到页面底部...</p>
    </div>
  </main>
  
  <!-- 回到顶部按钮 -->
  <button class="back-to-top" id="backToTop">↑</button>
</body>
</html>
  1. 添加CSS样式：
css
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
}

/* 固定导航栏 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-list {
  display: flex;
  list-style: none;
}

.nav-list li {
  margin-left: 30px;
}

.nav-list a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-list a:hover {
  color: #3498db;
}

/* 主要内容 */
.main-content {
  margin-top: 80px;
  padding: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.main-content h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.main-content > p {
  text-align: center;
  color: #666;
  margin-bottom: 40px;
}

/* 提示框容器 */
.tooltip-container {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.tooltip-btn {
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tooltip-btn:hover {
  background-color: #2980b9;
}

/* 提示框 */
.tooltip {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: none;
}

.tooltip.show {
  display: block;
}

.tooltip h3 {
  color: #333;
  margin-bottom: 10px;
}

.tooltip p {
  color: #666;
  margin-bottom: 15px;
}

.close-btn {
  padding: 8px 16px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 模拟长内容 */
.long-content {
  height: 1500px;
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  padding: 20px;
  border-radius: 8px;
}

.long-content p {
  margin-bottom: 300px;
  color: #666;
  text-align: center;
}

/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #2980b9;
  transform: translateY(-3px);
}
  1. 添加JavaScript：
javascript
// 显示/隐藏提示框
const showTooltipBtn = document.getElementById('showTooltip');
const closeTooltipBtn = document.getElementById('closeTooltip');
const tooltip = document.getElementById('tooltip');

showTooltipBtn.addEventListener('click', () => {
  tooltip.classList.add('show');
});

closeTooltipBtn.addEventListener('click', () => {
  tooltip.classList.remove('show');
});

// 回到顶部功能
const backToTopBtn = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 300) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
  1. 运行页面：在浏览器中打开文件，观察效果

预期效果 ​

  • 固定导航栏：始终固定在页面顶部
  • 回到顶部按钮：滚动超过300px时显示，点击平滑滚动到顶部
  • 弹出提示框：点击按钮显示绝对定位的提示框

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建