English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 布局系统：容器、定位与溢出控制

1. Container 容器

Container 类创建一个响应式的居中容器，根据断点自动调整最大宽度。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container 容器演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- 基础容器 -->
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4">基础容器</h2>
      <p class="text-gray-600">container 会根据屏幕宽度自动调整最大宽度</p>
    </div>
  </div>

  <!-- 全宽背景 + 容器内容 -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">全宽背景 + 容器内容</h2>
      <p class="text-blue-100">背景撑满整个屏幕，内容居中显示</p>
    </div>
  </div>

  <!-- 不同断点下的容器宽度 -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">容器断点说明</h3>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">sm (≥640px)</span>
          <span class="font-mono">max-width: 640px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">md (≥768px)</span>
          <span class="font-mono">max-width: 768px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">lg (≥1024px)</span>
          <span class="font-mono">max-width: 1024px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">xl (≥1280px)</span>
          <span class="font-mono">max-width: 1280px</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">2xl (≥1536px)</span>
          <span class="font-mono">max-width: 1536px</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 自定义容器宽度 -->
  <div class="max-w-2xl mx-auto p-4 mt-6">
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-800 mb-2">自定义最大宽度</h3>
      <p class="text-green-600">使用 max-w-2xl (672px) 替代 container</p>
    </div>
  </div>
</body>
</html>
逻辑代码 56 行（超过 40 行限制，仅展示）

Container 断点对照：

断点 最小宽度 容器最大宽度
默认 - 100%
sm 640px 640px
md 768px 768px
lg 1024px 1024px
xl 1280px 1280px
2xl 1536px 1536px

传统 CSS vs Tailwind 传统方式需要手动设置 max-width 和媒体查询来实现响应式容器，而 Tailwind 的 container 类自动处理所有断点。

💡 提示： container 需要配合 mx-auto 才能水平居中。可以在配置中启用 center: true 让容器自动居中。

2. Position 定位

Tailwind 提供完整的定位系统：static、relative、absolute、fixed、sticky。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position 定位演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- relative + absolute -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">relative + absolute 定位</h3>
      <div class="relative h-48 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded">
          top-4 left-4
        </div>
        <div class="absolute top-4 right-4 bg-green-500 text-white px-4 py-2 rounded">
          top-4 right-4
        </div>
        <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-4 py-2 rounded">
          bottom-4 left-4
        </div>
        <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-4 py-2 rounded">
          bottom-4 right-4
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="bg-red-500 text-white px-4 py-2 rounded">inset-0 居中</span>
        </div>
      </div>
    </div>

    <!-- sticky 定位 -->
    <div class="bg-white rounded-lg shadow">
      <div class="sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg z-10">
        <h3 class="font-semibold">sticky 定位 - 向下滚动查看效果</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">向下滚动，标题会固定在顶部。</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">滚动区域</span>
        </div>
        <p class="text-gray-600">继续滚动...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">更多内容</span>
        </div>
      </div>
    </div>

    <!-- fixed 定位示例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">fixed 定位说明</h3>
      <p class="text-gray-600 mb-4">
        fixed 定位相对于视口定位，常用于导航栏、返回顶部按钮等。
        示例代码：
      </p>
      <pre class="bg-gray-100 p-4 rounded text-sm">
&lt;nav class="fixed top-0 left-0 right-0 bg-white shadow"&gt;
  固定导航栏
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  返回顶部
&lt;/button&gt;</pre>
    </div>

    <!-- 定位属性 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">定位偏移属性</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">top-0</code>
          <span class="text-gray-500 text-sm ml-2">top: 0px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">right-4</code>
          <span class="text-gray-500 text-sm ml-2">right: 16px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">bottom-full</code>
          <span class="text-gray-500 text-sm ml-2">bottom: 100%</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">left-1/2</code>
          <span class="text-gray-500 text-sm ml-2">left: 50%</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 83 行（超过 40 行限制，仅展示）

定位类名对照：

类名 CSS 值 说明
static position: static 默认定位，无偏移
relative position: relative 相对定位，保留原位置
absolute position: absolute 绝对定位，相对最近定位祖先
fixed position: fixed 固定定位，相对视口
sticky position: sticky 粘性定位，滚动时固定

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 position 属性和偏移值，而 Tailwind 使用 relative、top-4、left-4 等类名直接在 HTML 中声明。

3. Z-index 层叠顺序

Z-index 控制定位元素的层叠顺序，决定哪些元素显示在前面。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-index 层叠顺序演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 层叠示例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index 层叠效果</h3>
      <div class="relative h-64">
        <div class="absolute left-8 top-8 w-48 h-32 bg-red-400 rounded-lg shadow-lg z-10 flex items-center justify-center">
          <span class="text-white font-bold">z-10</span>
        </div>
        <div class="absolute left-16 top-16 w-48 h-32 bg-blue-400 rounded-lg shadow-lg z-20 flex items-center justify-center">
          <span class="text-white font-bold">z-20</span>
        </div>
        <div class="absolute left-24 top-24 w-48 h-32 bg-green-400 rounded-lg shadow-lg z-30 flex items-center justify-center">
          <span class="text-white font-bold">z-30</span>
        </div>
        <div class="absolute left-32 top-32 w-48 h-32 bg-purple-400 rounded-lg shadow-lg z-40 flex items-center justify-center">
          <span class="text-white font-bold">z-40</span>
        </div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用场景</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <code class="w-24">z-0</code>
          <span class="text-gray-600">默认层级</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">卡片、内容区域</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">下拉菜单、侧边栏</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">固定导航栏</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">模态框背景遮罩</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">模态框、弹窗</span>
        </div>
      </div>
    </div>

    <!-- 负 z-index -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">负值 Z-index</h3>
      <div class="relative h-32">
        <div class="absolute inset-0 bg-blue-100 rounded flex items-center justify-center">
          <span class="text-blue-600">z-0 背景层</span>
        </div>
        <div class="absolute left-4 top-4 w-32 h-24 bg-red-400 rounded -z-10 flex items-center justify-center">
          <span class="text-white">-z-10</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 70 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置具体的 z-index 数值，而 Tailwind 提供从 z-0 到 z-50 的预设层级，满足大多数场景需求。

⚠️ 注意： z-index 仅对定位元素（relative、absolute、fixed、sticky）生效。使用 z-auto 可以重置为默认行为。

4. Overflow 溢出控制

Overflow 控制元素内容超出容器时的显示行为。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow 溢出控制演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- overflow-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-auto</h3>
      <p class="text-gray-600 mb-4">内容溢出时显示滚动条</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">这是一段很长的内容...</p>
        <p class="mb-4">用于演示 overflow-auto 效果。</p>
        <p class="mb-4">当内容超出容器高度时，会自动显示滚动条。</p>
        <p class="mb-4">用户可以滚动查看所有内容。</p>
        <p class="mb-4">继续添加更多内容...</p>
        <p class="mb-4">更多的文本内容。</p>
        <p>最后一段内容。</p>
      </div>
    </div>

    <!-- overflow-hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-hidden</h3>
      <p class="text-gray-600 mb-4">隐藏溢出的内容</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">这是一段很长的内容...</p>
        <p class="mb-4">用于演示 overflow-hidden 效果。</p>
        <p class="mb-4">超出容器的内容会被隐藏。</p>
        <p class="mb-4">用户无法滚动查看被隐藏的内容。</p>
        <p class="mb-4">这段内容你看不到...</p>
        <p class="mb-4">这段也看不到...</p>
        <p>这段也看不到...</p>
      </div>
    </div>

    <!-- overflow-scroll -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-scroll</h3>
      <p class="text-gray-600 mb-4">始终显示滚动条</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">这段内容很少...</p>
        <p>但滚动条仍然会显示。</p>
      </div>
    </div>

    <!-- 水平溢出 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">水平溢出控制</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto（水平滚动）</p>
          <div class="overflow-x-auto border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-blue-200 p-4 rounded flex-shrink-0 w-48">项目 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">项目 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">项目 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">项目 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden（隐藏水平溢出）</p>
          <div class="overflow-x-hidden border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-green-200 p-4 rounded flex-shrink-0 w-48">项目 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">项目 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">项目 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">项目 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- text-overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">文本溢出</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate（单行省略）</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            这是一段很长的文本内容，使用 truncate 类可以实现单行文本溢出时显示省略号效果，超出容器宽度的部分会被隐藏并显示 ...
          </p>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">text-ellipsis + overflow-hidden</p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap bg-gray-100 p-3 rounded">
            这是另一种实现省略号的方式，需要组合使用 text-ellipsis、overflow-hidden 和 whitespace-nowrap
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 91 行（超过 40 行限制，仅展示）

Overflow 类名对照：

类名 CSS 值 说明
overflow-auto overflow: auto 需要时显示滚动条
overflow-hidden overflow: hidden 隐藏溢出内容
overflow-visible overflow: visible 显示溢出内容（默认）
overflow-scroll overflow: scroll 始终显示滚动条
overflow-x-auto overflow-x: auto 水平方向自动滚动
overflow-y-auto overflow-y: auto 垂直方向自动滚动

传统 CSS vs Tailwind 传统方式需要为不同方向分别设置 overflow-x 和 overflow-y 属性，而 Tailwind 提供统一的 overflow- 前缀。

5. Float 浮动与 Clear

Float 用于实现元素的浮动布局，Clear 用于控制浮动行为。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float 浮动演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础浮动 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础浮动</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-32 h-32 bg-blue-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-left</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          这段文字环绕在浮动元素周围。float-left 使元素向左浮动，
          后续内容会围绕浮动元素排列。这是传统的文字环绕图片效果。
          继续添加更多文字以展示环绕效果...
        </p>
      </div>
    </div>

    <!-- 右浮动 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">右浮动</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-right w-32 h-32 bg-green-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-right</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          float-right 使元素向右浮动。文字会从左侧环绕浮动元素。
          这种布局在传统网页设计中很常见，现在更多使用 Flexbox 或 Grid。
          继续添加更多文字以展示环绕效果...
        </p>
      </div>
    </div>

    <!-- clear 控制 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">clear 控制</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-24 h-24 bg-blue-400 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">浮动</span>
        </div>
        <div class="float-left w-24 h-24 bg-blue-500 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">浮动</span>
        </div>
        <div class="clear-both bg-yellow-200 p-4 rounded mt-4">
          <p>clear-both: 清除两侧浮动，确保在新行开始</p>
        </div>
      </div>
    </div>

    <!-- clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">clearfix（清除浮动）</h3>
      <div class="bg-gray-100 p-4 rounded overflow-hidden">
        <div class="float-left w-32 h-32 bg-purple-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">浮动元素</span>
        </div>
        <div class="float-right w-32 h-32 bg-purple-500 rounded m-4 flex items-center justify-center">
          <span class="text-white">浮动元素</span>
        </div>
        <p class="text-gray-600">
          使用 overflow-hidden 在父元素上清除浮动
        </p>
      </div>
    </div>

    <!-- 现代替代方案 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">现代替代方案（推荐）</h3>
      <p class="text-gray-600 mb-4">
        对于布局需求，建议使用 Flexbox 或 Grid 替代 Float：
      </p>
      <div class="flex gap-4">
        <div class="w-32 h-32 bg-blue-400 rounded flex items-center justify-center">
          <span class="text-white">Flex 1</span>
        </div>
        <div class="w-32 h-32 bg-blue-500 rounded flex items-center justify-center">
          <span class="text-white">Flex 2</span>
        </div>
        <div class="w-32 h-32 bg-blue-600 rounded flex items-center justify-center">
          <span class="text-white">Flex 3</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 84 行（超过 40 行限制，仅展示）

Float/Clear 类名对照：

类名 CSS 值 说明
float-left float: left 向左浮动
float-right float: right 向右浮动
float-none float: none 不浮动
clear-left clear: left 清除左浮动
clear-right clear: right 清除右浮动
clear-both clear: both 清除两侧浮动
clear-none clear: none 不清除浮动

传统 CSS vs Tailwind 传统方式需要编写 .clearfix 类并使用 ::after 伪元素清除浮动，而 Tailwind 可以直接使用 overflow-hidden 在父元素上清除。

⚠️ 注意： Float 布局已逐渐被 Flexbox 和 Grid 取代。Float 现在主要用于文字环绕图片等特定场景。

6. 综合布局示例

结合以上所有知识点，创建一个完整的页面布局。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合布局示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- 固定导航栏 -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">我的网站</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">首页</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">关于</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">联系</a>
      </div>
    </div>
  </nav>

  <!-- 主内容区域 -->
  <div class="pt-16">
    <!-- Hero 区域 -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">欢迎来到我的网站</h2>
        <p class="text-xl opacity-90">使用 Tailwind CSS 构建的现代布局</p>
      </div>
    </div>

    <!-- 内容卡片 -->
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
            <p class="text-gray-600 text-sm">卡片内容描述...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
            <p class="text-gray-600 text-sm">卡片内容描述...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
            <p class="text-gray-600 text-sm">卡片内容描述...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky 侧边栏布局 -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- 主内容 -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">主内容区域</h3>
          <div class="space-y-4">
            <p class="text-gray-600">这是主要的内容区域，会占据大部分空间。</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <aside class="lg:w-64 lg:sticky lg:top-20 lg:self-start">
          <div class="bg-white rounded-lg shadow p-6">
            <h4 class="font-semibold mb-4">侧边栏</h4>
            <p class="text-gray-600 text-sm">使用 sticky 定位，滚动时会固定在顶部。</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- 返回顶部按钮 -->
  <button class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-40">
    ↑
  </button>
</body>
</html>
逻辑代码 74 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现固定导航、响应式网格、粘性侧边栏等布局，而 Tailwind 使用工具类直接在 HTML 中完成，代码量减少 70% 以上。

❓ 常见问题

Q container 和 max-w-2xl 有什么区别？
A container 是响应式的，会在不同断点自动调整最大宽度。max-w-2xl 是固定的 672px 最大宽度。如果需要固定宽度，使用后者更合适。
Q sticky 定位为什么不生效？
A sticky 需要父元素有明确的高度且允许滚动。常见问题是父元素设置了 overflow: hidden，这会阻止 sticky 生效。确保父元素没有限制溢出。
Q 什么时候用 overflow-hidden 清除浮动？
A 当父元素包含浮动子元素，且需要父元素高度包含子元素时使用。现代布局推荐使用 Flexbox 或 Grid，避免使用 Float。
Q z-index 的数值有什么规律？
A Tailwind 提供 z-0 到 z-50，建议按功能分层：z-10 内容、z-20 导航、z-30 固定导航、z-40 遮罩、z-50 弹窗。避免使用过大的数值。

📖 小节

📝 作业

  1. ⭐ 创建一个使用 container 和 mx-auto 的居中页面，包含固定宽度的卡片网格布局

  2. ⭐⭐ 创建一个带有固定导航栏（fixed）和粘性侧边栏（sticky）的两栏布局页面

  3. ⭐⭐⭐ 创建一个完整的 Modal 弹窗组件，要求使用 fixed 定位、z-50 层级、overflow-hidden 遮罩背景，并实现响应式适配

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏