CSS 定位技术解析

最新推荐文章于 2025-09-09 22:28:35 发布
最新推荐文章于 2025-09-09 22:28:35 发布
阅读量616 收藏 14
点赞数 28
CC 4.0 BY-SA版权
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Toroto5/article/details/151312295

一、定位技术核心概念

CSS 定位是网页布局的核心技术之一，主要通过position属性实现，该属性决定元素的定位模式。常见的定位模式包括：

  1. static（默认值）：元素遵循正常文档流
  2. relative：相对定位，相对于元素自身原位置定位
  3. absolute：绝对定位，相对于最近的定位祖先元素定位
  4. fixed：固定定位，相对于视口定位
  5. sticky：粘性定位，在特定阈值内表现为固定定位

定位元素需要配合以下属性使用：

  1. 定位偏移属性（top/right/bottom/left）：仅在position值非static时生效，用于定义元素相对于参考点的偏移距离。例如：
    • top: 20px 表示元素上边缘距离参考点顶部20px
    • left: 50% 表示元素左边缘距离参考点左侧50%宽度
  2. 堆叠顺序属性（z-index）：控制定位元素在垂直于屏幕方向（z轴）的显示优先级，其特性包括：
    • 取值为整数（默认0，可正可负）
    • 值越大元素越靠上显示
    • 仅对position值非static的元素生效
    • 同层级元素的z-index比较遵循DOM树的先后顺序

实际应用示例：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

二、5 种定位类型详解

1. 静态定位（static）：默认定位模式

position: static 是所有 HTML 元素的默认定位方式。在这种模式下，元素会按照正常文档流（Normal Flow）从上到下、从左到右依次排列，不支持使用定位偏移属性（top, right, bottom, left）和 z-index 属性。

特性详解：

  • 文档流行为：
    • 元素的位置完全由 HTML 文档结构和 CSS 布局规则决定
    • 块级元素会独占一行，行内元素会水平排列
  • 定位属性无效：
    • 即使设置了 top/right/bottom/left/z-index 等属性，也不会产生任何效果
  • 布局影响：
    • 不会脱离文档流，后续元素会紧接在其后自然排列
    • 受 margin、padding 等常规盒模型属性影响

代码示例：

.static-box {
  position: static; /* 可省略，因为这是默认值 */
  width: 200px;
  height: 200px;
  background: #f00;
  
  /* 以下属性无效，因为静态定位不支持 */
  top: 50px;     /* 不会产生偏移 */
  left: 30px;    /* 不会产生偏移 */
  z-index: 10;   /* 不会改变层级 */
}

实际应用场景：

  1. 常规文本内容（段落、标题）
  2. 基础列表结构（ul/ol）
  3. 不需要特殊定位的容器元素
  4. 表单元素的标准布局

2. 相对定位（relative）：相对自身原位置偏移

position: relative 使元素相对于其在正常文档流中的原始位置进行偏移，但不会脱离文档流 - 元素在文档中占据的空间仍然保留，其他元素不会填补这个空间。

特性详解：

  • 参考基准：
    • 以元素在正常文档流中的原始位置为参考点
    • 偏移量通过 top/right/bottom/left 属性控制
  • 文档流影响：
    • 视觉上移动了位置，但在文档流中仍占据原始空间
    • 不会影响其他元素的布局位置
  • 层级控制：
    • 支持 z-index 属性控制堆叠顺序
    • 可创建新的层叠上下文

代码示例：

.relative-box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ff0;
  
  /* 相对原位置向右偏移30px，向下偏移20px */
  left: 30px;   /* 从左向右偏移 */
  top: 20px;    /* 从上向下偏移 */
  
  /* 支持z-index控制层级 */
  z-index: 2;
  
  /* 注意：同时设置left和right时，left优先；同理top优先于bottom */
}

实际应用场景：

  1. 微调元素位置：

    • 图标与文字对齐
    • 调整表单元素的视觉位置
    • 创建重叠效果（配合z-index）

  2. 作为定位上下文：

    • 为内部绝对定位（absolute）元素提供参考容器
    <div class="relative-parent">
  <div class="absolute-child"></div>
</div>

  3. 创建视觉特效：

    • 悬停动画（hover时微调位置）
    • 伪元素定位

3. 绝对定位（absolute）：相对最近定位祖先偏移

position: absolute 使元素完全脱离正常文档流，不占据文档空间，其位置相对于最近的定位祖先元素（position值不为static的元素）确定。如果没有定位祖先，则相对于初始包含块（通常是视口）定位。

特性详解：

  • 参考基准：
    • 向上查找最近的定位祖先（relative/absolute/fixed/sticky）
    • 如果找不到，则相对于初始包含块（通常是视口）
  • 文档流影响：
    • 完全脱离文档流
    • 原位置会被其他元素占据
  • 尺寸特性：
    • 宽度默认由内容决定（类似inline-block）
    • 可通过width/height显式设置尺寸
  • 定位特性：
    • 支持所有定位偏移属性
    • 支持z-index控制层级

典型代码结构：

<div class="parent-container">
  <div class="absolute-child"></div>
</div>


/* 父容器：作为定位参考 */
.parent-container {
  position: relative; /* 关键！创建定位上下文 */
  width: 400px;
  height: 400px;
  background: #eee;
}

/* 绝对定位子元素 */
.absolute-child {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #00f;
  
  /* 相对父容器右下角偏移20px */
  right: 20px;
  bottom: 20px;
  
  /* 支持z-index */
  z-index: 3;
}

实际应用场景：

  1. 精确控制元素位置：

    • 弹窗中的关闭按钮
    • 卡片内的标签/角标
    • 图片上的水印

  2. 复杂布局实现：

    • 多列对齐布局
    • 悬浮菜单/下拉框
    • 自定义表单控件

  3. 特殊效果：

    • 全屏遮罩层
    • 跟随鼠标的元素
    • 自定义工具提示

4. 固定定位（fixed）：相对浏览器视口固定

position: fixed 使元素脱离文档流，并相对于浏览器视口（viewport）进行定位。无论页面如何滚动，元素都会保持在屏幕的固定位置。

特性详解：

  • 参考基准：
    • 始终相对于浏览器视口定位
    • 不受任何祖先元素影响（即使祖先有定位属性）
  • 文档流影响：
    • 完全脱离文档流
    • 不占据页面空间
  • 滚动行为：
    • 不随页面滚动而移动
    • 固定在屏幕指定位置
  • 特殊注意：
    • 在某些移动设备上可能有特殊表现
    • 受transform属性影响（某些情况下会改变定位基准）

代码示例：

/* 固定在顶部的导航栏 */
.fixed-header {
  position: fixed;
  width: 100%;  /* 横向铺满视口 */
  height: 60px;
  background: #333;
  color: #fff;
  
  /* 固定在视口顶部 */
  top: 0;
  left: 0;
  right: 0;  /* 替代width:100%的另一种写法 */
  
  /* 确保在最顶层 */
  z-index: 999;
  
  /* 可选：添加阴影增强视觉效果 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

实际应用场景：

  1. 全局导航元素：

    • 顶部导航栏
    • 底部工具栏
    • 侧边固定菜单

  2. 功能型元素：

    • 在线客服悬浮按钮
    • "回到顶部"按钮
    • 固定广告位

  3. 提示性元素：

    • 固定通知栏
    • Cookie提示条
    • 全局加载进度条

5. 粘性定位（sticky）：结合相对与固定的混合定位

position: sticky 是相对定位和固定定位的混合体。元素在跨越特定阈值前为相对定位，之后变为固定定位。

特性详解：

  • 工作方式：
    • 初始状态：表现为相对定位（position: relative）
    • 触发条件：当元素到达通过top/right/bottom/left指定的阈值位置
    • 触发后：表现为固定定位（position: fixed）
  • 参考基准：
    • 相对于最近的滚动祖先（overflow不为visible的元素）
    • 如果找不到，则相对于视口
  • 必要条件：
    • 必须指定至少一个阈值（top/right/bottom/left）
    • 祖先元素不能有overflow: hidden（否则会失效）
  • 兼容性注意：
    • 较新的CSS属性（IE不支持）
    • 某些移动端浏览器可能有特殊表现

代码示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th class="sticky-header">标题1</th>
        <th class="sticky-header">标题2</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>


/* 可滚动的表格容器 */
.table-container {
  width: 800px;
  height: 300px;
  overflow: auto;  /* 必须设置，否则粘性定位无法工作 */
  border: 1px solid #ddd;
}

/* 粘性表头 */
.sticky-header {
  position: sticky;
  top: 0;  /* 滚动到距离顶部0px时触发固定 */
  background: #008c8c;
  color: #fff;
  
  /* 提升层级，确保在内容上方 */
  z-index: 100;
  
  /* 可选样式 */
  padding: 10px;
  text-align: left;
}

实际应用场景：

  1. 长列表/表格：

    • 固定表头（滚动时保持可见）
    • 固定列标题

  2. 导航系统：

    • 滚动时跟随的侧边导航
    • 分段内容的标题吸附效果

  3. 特殊布局：

    • 分段式页面的节标题
    • 长文档的目录导航

综合比较表

定位类型参考基准脱离文档流支持偏移属性支持z-index典型应用场景
static文档流否否否常规文档布局
relative自身原始位置否（保留空间）是是微调位置、定位上下文
absolute最近定位祖先是是是精确位置控制
fixed视口是是是固定位置元素
sticky滚动容器部分（触发后）是是滚动吸附效果

三、定位技术常见问题与解决方案

1. 绝对定位元素无法相对于父容器定位问题

问题现象：绝对定位元素没有按照预期相对于直接父元素定位，而是相对于更远的祖先元素或视口定位。

根本原因：父容器的position属性为默认值static，导致绝对定位元素会向上寻找第一个非static定位的祖先元素作为参考。

详细解决方案：

  1. 推荐方案：给父容器设置position: relative 
    .parent {
  position: relative; /* 创建定位上下文 */
  width: 500px;
  height: 300px;
}
.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

  2. 替代方案：也可以使用position: absolute或position: fixed，但这可能影响父元素自身的定位行为

应用场景：制作下拉菜单、工具提示、模态框等需要精确定位的组件时常见此问题。

2. 粘性定位(sticky)失效问题

问题现象：设置了position: sticky的元素没有在滚动时保持"粘性"效果。

常见原因及解决方案：

  1. 未设置偏移属性：

    • 必须至少设置一个偏移属性(top/right/bottom/left)
    • 修复示例： 
      .sticky-element {
  position: sticky;
  top: 0; /* 关键：必须设置至少一个偏移值 */
}

  2. 祖先元素overflow限制：

    • 检查所有祖先元素是否有overflow: hidden或overflow: auto
    • 确保粘性元素的直接滚动容器高度足够
    • 修复步骤：
      1. 检查DOM树中所有祖先元素
      2. 移除不必要的overflow属性
      3. 确保容器高度大于粘性元素高度

  3. 其他可能原因：

    • 父元素高度不足
    • 浏览器兼容性问题(旧版浏览器可能需要前缀)

典型应用场景：制作滚动时保持可见的表头、导航栏或侧边栏。

3. 定位元素重叠时层叠顺序问题

问题现象：多个定位元素重叠时，无法控制哪个元素显示在上层。

原因分析：

  • 未设置z-index属性，浏览器按DOM顺序决定层叠
  • 设置的z-index值小于其他重叠元素的z-index
  • z-index仅对定位元素(position非static)生效

解决方案：

  1. 确保元素已定位：

    .element {
  position: relative/absolute/fixed/sticky;
  z-index: 10; /* 只有定位元素z-index才有效 */
}

  2. 合理设置z-index层级：

    • 基础层：0-100
    • 内容层：101-1000
    • 弹窗/遮罩：1001-10000
    • 最高级：>10000 (谨慎使用)

实际案例：

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>


.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  background: red;
  z-index: 1; /* 显示在下层 */
}
.box2 {
  background: blue;
  z-index: 2; /* 显示在上层 */
  left: 50px;
  top: 50px;
}

注意事项：

  • 避免滥用z-index，建议使用CSS变量或预处理器管理z-index值
  • 复杂的层叠上下文(z-index stacking context)可能导致意外结果
  • 某些CSS属性(如transform)会创建新的层叠上下文

四、定位技术实战：实现一个悬浮弹窗

<div class="btn-container">
  <button class="show-btn">显示弹窗</button>
  <!-- 弹窗父容器：相对定位 -->
  <div class="popup-wrapper">
    <!-- 弹窗内容：绝对定位 -->
    <div class="popup-content">
      <p>这是一个悬浮弹窗</p>
      <button class="close-btn">关闭</button>
    </div>
  </div>
</div>

<style>
.btn-container {
  position: relative; /* 作为弹窗的定位参考 */
  margin: 50px;
}

.popup-wrapper {
  display: none; /* 默认隐藏 */
}

/* 弹窗显示时 */
.popup-wrapper.active {
  display: block;
}

.popup-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 280px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.close-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<script>
// 控制弹窗显示/隐藏
const showBtn = document.querySelector('.show-btn');
const closeBtn = document.querySelector('.close-btn');
const popupWrapper = document.querySelector('.popup-wrapper');

showBtn.addEventListener('click', () => {
  popupWrapper.classList.add('active');
});

closeBtn.addEventListener('click', () => {
  popupWrapper.classList.remove('active');
});
</script>

HTML 结构分析

<div class="btn-container">
  <button class="show-btn">显示弹窗</button>
  
  <!-- 弹窗父容器：相对定位 -->
  <div class="popup-wrapper">
    <!-- 弹窗内容：绝对定位 -->
    <div class="popup-content">
      <p>这是一个悬浮弹窗</p>
      <button class="close-btn">关闭</button>
    </div>
  </div>
</div>

结构说明：

  1. btn-container 作为整个组件的容器，设置为相对定位
  2. show-btn 是触发弹窗显示的按钮
  3. popup-wrapper 是弹窗的父容器，默认隐藏
  4. popup-content 是实际显示的弹窗内容

CSS 样式详解

.btn-container {
  position: relative; /* 关键：作为弹窗的定位参考 */
  margin: 50px; /* 提供一些外边距 */
}

.popup-wrapper {
  display: none; /* 默认隐藏弹窗 */
}

/* 弹窗显示时的样式 */
.popup-wrapper.active {
  display: block;
}

.popup-content {
  position: absolute; /* 关键：相对于最近的定位祖先元素定位 */
  top: 40px; /* 距离按钮下方的间距 */
  left: 0; /* 与按钮左对齐 */
  width: 280px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000; /* 确保弹窗在最上层 */
}

.close-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

关键点说明：

  1. position: relative 在 btn-container 上设置，使绝对定位的子元素相对于它定位
  2. position: absolute 在 popup-content 上设置，使其脱离文档流
  3. z-index 确保弹窗显示在其他内容之上
  4. 默认隐藏弹窗，通过添加 active 类来显示

JavaScript 交互逻辑

// 获取DOM元素
const showBtn = document.querySelector('.show-btn');
const closeBtn = document.querySelector('.close-btn');
const popupWrapper = document.querySelector('.popup-wrapper');

// 显示弹窗
showBtn.addEventListener('click', () => {
  popupWrapper.classList.add('active');
});

// 关闭弹窗
closeBtn.addEventListener('click', () => {
  popupWrapper.classList.remove('active');
});

交互说明：

  1. 点击"显示弹窗"按钮时，为 popup-wrapper 添加 active 类
  2. 点击"关闭"按钮时，移除 active 类
  3. 通过简单的类名切换实现显示/隐藏效果

实际应用场景

  1. 表单提交确认：在提交表单前显示确认弹窗
  2. 信息提示：显示额外信息或帮助内容
  3. 操作确认：删除或重要操作前的二次确认
  4. 登录/注册：显示登录或注册表单

扩展功能建议

  1. 添加点击弹窗外部区域关闭弹窗的功能
  2. 增加动画效果使弹窗显示更平滑
  3. 添加ESC键关闭弹窗的支持
  4. 实现弹窗拖拽功能
  5. 添加弹窗显示/隐藏的回调函数
深入浅出 CSS 定位：全面解析与实战指南
2301_79175212的博客
10-04 1933
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
CSS技术解析：元素显示模式与背景属性的应用指南
02-11
随后详细解析了背景相关属性的功能和应用场景，从简单的纯色填充到复杂图像处理，包括指定路径加载、重复铺设规则制定以及定位锚点选取等方面进行了全面介绍，还提及了如何利用简写的background来优化代码质量与效率...
CSS定位详解：掌握布局的核心技术
小白的博客
05-24 1088
本文全面解析CSS中的五种定位方式：静态定位(static)是默认方式，元素遵循文档流；相对定位(relative)保持原始空间，可微调位置；绝对定位(absolute)脱离文档流，相对于最近定位祖先元素定位；固定定位(fixed)相对于视口定位，不随滚动移动；粘性定位(sticky)在跨越阈值前相对定位，之后变为固定定位。每种定位方式适用于不同场景：相对定位适合微调元素位置，绝对定位适合悬浮菜单，固定定位适合导航栏，粘性定位适合吸顶效果。掌握这些定位技术对实现复杂布局至关重要。
CSS定位全解析：position属性详解与应用场景
Ccwlwlbb51522的博客
02-20 1303
positionstatic：默认值，元素按照正常的文档流进行布局。relative：相对定位，元素相对于其正常位置进行偏移。absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。fixed：固定定位，元素相对于浏览器窗口进行定位。sticky：粘性定位，元素在滚动时根据设定的阈值在相对定位和固定定位之间切换。CSS定位是网页布局中不可或缺的工具，掌握position属性的各个取值及其应用场景，可以帮助你实现更加灵活和复杂的布局效果。在实际开发中，应根据具体需求选择合适的定位方式。
CSS解析:定位和层叠上下文
晓风残月淡的博客
08-31 2406
许多开发人员对定位的理解很粗略，如果不完全了解定位，就很容易给自己挖坑。有时候可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。一般的布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。
CSS布局全解析
知心宝贝的博客
08-25 2038
CSS 布局是指使用 CSS 样式来控制 HTML 元素的位置、大小和间距等属性，从而实现网页的布局效果。
css sprite技术解析
Hu199055的专栏
05-19 810
css sprite技术解析 来源 : 作者 : admin时间 : 2014-09-28 11:15:45 人气指数 : 3882 评论 收藏 导语 说到css sprite技术第一次接触还是在百度站长工具中网站检测时看到到，说这个技术可以减少网站图片请求次数，当时还不是很理解，之后了解了一番，明白了其中的原理，故在此给大家分享一下。　CSSSprites在国内
CSS网站布局技术源码解析
weixin_42613017的博客
07-18 1000
浮动（float）属性是CSS中最早用于布局的技术之一，它允许元素脱离文档流，并向左或向右移动，直到其外边缘碰到包含框或另一个浮动元素的边缘为止。该属性解决了文本环绕图片的问题，但随后逐渐演变成页面布局的解决方案。浮动属性有三个主要值：leftright和none。默认情况下，元素不会浮动。—— 元素向左浮动。—— 元素向右浮动。—— 默认值，元素不浮动。浮动元素的主要影响包括：文档流的改变—— 浮动元素会影响周围元素的布局，非浮动元素会围绕浮动元素排列。
CSS固定定位：滚动条内容定位技术详解
weixin_42181686的博客
03-13 1390
固定定位（）是CSS中一个常用的定位属性，它允许元素相对于浏览器窗口进行定位，而不是相对于其父元素。这意味着，即使页面进行滚动，固定定位的元素也会保持在浏览器窗口的指定位置。固定定位的元素会脱离正常的文档流，并不会为后续的元素提供空间。CSS中的toprightbottomleft属性是定义元素位置的关键工具。它们允许开发者精确地控制元素在页面上的具体位置，无论是相对定位、绝对定位还是固定定位元素。每个属性都代表元素边框距离其最近的定位上下文边缘的距离。top。
CSS3新特性深度解析：Position Sticky粘性定位完整指南
前端开发-前端技术分享
07-25 712
position: sticky 是一个强大的 CSS 属性，能够创建优雅的用户界面效果。正确使用时，它可以显著改善用户体验，但需要注意浏览器兼容性和父容器的限制条件。在实际项目中，建议结合具体需求和目标浏览器支持情况来决定是否使用此属性。
CSS三大定位方式（浮动、定位、弹性盒）详细解析
sleep_i_like的博客
02-20 3965
详细解析css浮动，定位，和弹性盒布局方式
基于java+javaScript+css开发的射频识别技术的大楼人员定位系统+源码+项目解析（毕业设计&课程设计&项目开发）
05-26
基于java+javaScript+css开发的射频识别技术的大楼人员定位系统+源码+项目解析，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 硬件采用RFID打卡，...
CSS in JS 的演进：Styled Components, Emotion 等的深度对比与技术选型指引
GEO_YScsn的博客
09-08 521
CSS in JS（JS中的CSS）应运而生，它将CSS与JavaScript紧密结合，允许开发者在JavaScript文件中直接编写样式，从而实现组件级别的样式封装、动态样式控制以及更优的样式管理。Emotion 同样是CSS in JS领域的重要力量，它在Styled Components的基础上，提供了更灵活的API和更优的性能优化方案。CSS in JS 的核心理念是通过JavaScript的力量，将CSS的声明、选择器、状态联动等逻辑，以更现代、更具编程性的方式融入到组件的生命周期中。
CSS 瀑布流图片简易实现
Mo_jon的博客
09-04 911
本文介绍了四种实现瀑布流布局的CSS方法：1) 使用float:left实现固定高度的常规浮动布局；2) 使用flex-wrap:wrap实现固定高度的弹性盒子布局；3) 使用column-count实现列数固定、宽高自适应的多列布局；4) 使用Grid布局结合grid-auto-flow:dense实现列数变化、宽高自适应的网格布局。每种方法都提供了对应的HTML结构和CSS样式代码示例，适用于不同需求场景下的瀑布流实现。
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
张迅之的博客
09-05 238
本文介绍了一种实现卡片式选项卡圆弧效果的CSS方案。通过利用ant-design的Tabs组件，结合::before和::after伪元素，并使用transform: skewX()实现斜切效果，配合box-shadow填充空白区域。关键点包括：设置圆角边框、斜切变换角度、阴影填补空缺、z-index层级控制等，最终实现了带有圆弧过渡的选项卡效果。代码中详细展示了普通状态和激活状态的不同样式处理，通过注释标明了重点实现部分。
CSS的文本样式
最新发布
2401_87118211的博客
09-09 121
先建立标签。
CSS 选择器的优先级/层叠性
学习笔记，不喜勿喷！！勿喷！！
09-05 340
CSS 选择器的优先级（也称为层叠顺序或特异性）决定了当多个规则应用于同一个元素时，哪个规则会被最终应用。!内联样式ID类/属性/伪类元素/伪元素特异性值越高，优先级越高。相同优先级时，后出现的规则胜出（后来者居上）。继承的样式优先级最低。
Flex布局——详解
sixteenxiahuax的博客
09-09 224
比float浮动布局更加灵活，不会造成脱标，若要对某个标签操作，则对其的父级标签加flex；Flex布局就是将一个盒子的字盒子变为，然后通过对其进行排列；在flex布局中，替换元素(display:block.....)若有固定宽高，则flex容器不会对齐进行压缩。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值