跟着 MDN 学CSS day_49：定位实例练习从入门到精通

引言：定位知识的实践应用

在掌握了CSS定位的基础理论之后，如何将这些知识应用于实际项目成为学习的下一个关键阶段。定位属性不仅仅是理论上的偏移和层叠，更是构建复杂交互界面的基石。本文将通过三个由浅入深的实例练习，从选项卡消息盒子到固定定位组件，再到纯CSS实现的滑动面板，完整展示定位属性在现代网页开发中的强大应用能力。每个实例都配有完整的代码实现和详细的解析，确保读者能够真正理解并独立完成这些功能。

一、列表消息盒子：绝对定位实现选项卡切换

选项卡消息盒子是在有限空间内展示大量信息的经典解决方案。这种设计模式广泛应用于策略游戏界面、移动端应用以及任何需要紧凑信息组织的场景。相比于传统的多页面跳转，选项卡将所有内容集中在一个组件中，避免了页面刷新带来的性能开销，也更便于跨面板的数据共享。

HTML结构搭建

选项卡组件的HTML结构需要清晰地区分控制区域和内容区域。控制区域使用无序列表包含多个链接，用于触发面板切换。内容区域使用容器包裹多个面板元素，每个面板对应一个选项卡的具体内容。

<sectionclass="info-box"><ul><li><ahref="#"class="active">Tab 1</a></li><li><ahref="#">Tab 2</a></li><li><ahref="#">Tab 3</a></li></ul><divclass="panels"><articleclass="active-panel"><h2>The first tab</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p></article><article><h2>The second tab</h2><p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p></article><article><h2>The third tab</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p><ol><li>dui neque eleifend lorem, a auctor libero turpis at sem.</li><li>Aliquam ut porttitor urna.</li><li>Nulla facilisi</li></ol></article></div></section>

在这段HTML代码中，section元素作为整个组件的容器，类名为info-box。无序列表中的三个链接分别对应三个不同的选项卡，其中第一个链接设置了active类表示初始激活状态。div容器类名为panels，内部包含三个article元素，每个article存储对应选项卡的内容。第一个article同样设置了active-panel类，确保初始状态与激活的选项卡匹配。

基础样式重置与容器设置

在进行组件样式设计之前，需要先进行全局样式的重置，确保组件在不同浏览器中获得一致的渲染效果。

html{font-family:sans-serif;}*{box-sizing:border-box;}body{margin:0;}.info-box{width:450px;height:400px;margin:0 auto;}

html选择器设置无衬线字体，sans-serif在不同操作系统下会自动映射为合适的系统字体。通配选择器将页面所有元素的box-sizing属性设置为border-box，这意味着元素设置的宽度和高度已经包含了内边距和边框，极大简化了尺寸计算。body的margin设置为0，移除了浏览器默认的外边距。info-box容器设置固定的宽度和高度，并使用margin: 0 auto实现水平居中。

选项卡导航样式化

选项卡导航需要呈现为水平排列的按钮组，每个按钮在交互时应有明确的视觉反馈。

.info-box ul{padding-left:0;margin-top:0;}.info-box li{float:left;list-style-type:none;width:150px;}.info-box li a{display:inline-block;text-decoration:none;width:100%;line-height:3;background-color:red;color:black;text-align:center;}.info-box li a:focus, .info-box li a:hover{background-color:#a60000;color:white;}.info-box li a.active{background-color:#a60000;color:white;}

首先移除ul元素的默认内边距和上外边距。列表项设置左浮动实现水平排列，list-style-type为none移除项目符号，宽度150像素确保三个按钮均匀分布。链接元素设置为行内块级，既能设置宽高又能保持在一行显示。text-decoration移除下划线，宽度100%填满父容器，line-height为3实现垂直居中。聚焦和悬停状态设置深红色背景和白色文字，提供交互反馈。active类的样式与交互状态保持一致，用于标识当前选中的选项卡。

内容面板的绝对定位布局

内容面板使用绝对定位实现所有面板重叠的效果，通过z-index控制显示层级。

.info-box .panels{height:352px;position:relative;clear:both;}.info-box article{position:absolute;top:0;left:0;height:352px;padding:10px;color:white;background-color:#a60000;}.info-box .active-panel{z-index:1;}

panels容器设置固定高度，position为relative使其成为内部绝对定位子元素的包含块。clear: both清除上方浮动的影响。每个article元素设置绝对定位，top和left均为0，将所有面板的左上角定位到容器左上角，实现完全重叠的效果。高度与容器相同，内边距使内容与边缘保持舒适距离。激活面板设置z-index为1，使其覆盖在其他面板之上。

JavaScript交互逻辑

JavaScript负责响应用户点击并动态更新激活状态。

vartabs=document.querySelectorAll(".info-box li a");varpanels=document.querySelectorAll(".info-box article");for(i=0;i<tabs.length;i++){vartab=tabs[i];setTabHandler(tab,i);}functionsetTabHandler(tab,tabPos){tab.onclick=function(){for(i=0;i<tabs.length;i++){if(tabs[i].getAttribute("class")){tabs[i].removeAttribute("class");}}tab.setAttribute("class","active");for(i=0;i<panels.length;i++){if(panels[i].getAttribute("class")){panels[i].removeAttribute("class");}}panels[tabPos].setAttribute("class","active-panel");};}

代码首先获取所有选项卡和所有面板的引用。使用for循环遍历每个选项卡，为每个选项卡绑定点击事件处理函数。当选项卡被点击时，先清除所有选项卡的class属性，再为当前点击的选项卡添加active类。然后清除所有面板的class属性，根据索引为对应的面板添加active-panel类，实现面板切换。

二、固定位置的列表消息盒子：固定定位的应用

在第一个实例的基础上，我们将消息盒子嵌入到包含大量内容的完整网页中，并使用固定定位使其始终停留在浏览器窗口的固定位置。这种设计模式在需要保持工具按钮或重要信息始终可见的场景中非常实用。

添加主内容区域

为了模拟真实网页环境，需要在消息盒子之外添加大量的内容。

<sectionclass="fake-content"><h1>Fake content</h1><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p><p>This is fake content. Your main web page contents would probably go here.</p></section>

这个section元素包含了标题和多个段落，用于模拟页面的主要内容区域。高度足够大时会产生滚动条，方便观察固定定位的效果。

固定定位与内容避让

将消息盒子改为固定定位，并为主内容区域设置左边距以避免重叠。

.info-box{width:450px;height:400px;position:fixed;top:0;}.fake-content{background-color:#a60000;color:white;padding:10px;height:2000px;margin-left:470px;}

info-box容器将position属性从默认值改为fixed，使其相对于浏览器视口定位。top属性设置为0，将消息盒子固定在视口顶部。原来的margin: 0 auto被移除，因为固定定位元素的外边距不会影响其在视口中的定位。fake-content设置左边距为470像素，略大于消息盒子的宽度450像素，确保内容区域不会被固定定位的消息盒子遮挡。

三、滑动隐藏的面板：纯CSS实现状态切换

第三个实例展示了checkbox hack技术，通过表单元素的checked状态配合CSS选择器实现面板的滑动显示和隐藏，整个过程无需编写任何JavaScript代码。

HTML结构与技术原理

HTML结构包含label标签、checkbox输入框和aside面板三个核心元素。

<labelfor="toggle">❔</label><inputtype="checkbox"id="toggle"><aside><!-- 面板内容 --></aside>

label标签的for属性与checkbox的id属性值相同，建立了二者的关联。点击label标签时，浏览器会自动触发checkbox的点击事件，改变其checked状态。这是一种创造性地利用HTML标准特性的技术，允许使用纯CSS来控制元素的显示与隐藏。

表单元素样式设置

label标签作为可见的触发按钮，需要进行视觉样式设计。checkbox输入框则需要从视觉上隐藏但保持功能可用。

label[for="toggle"]{font-size:3rem;position:absolute;top:4px;right:5px;z-index:1;cursor:pointer;}input[type="checkbox"]{position:absolute;top:-100px;}

属性选择器选中for属性为toggle的label元素。字体大小3rem使图标足够醒目。绝对定位使其脱离文档流，top和right属性将其固定在右上角。z-index为1确保按钮位于其他元素之上。cursor为pointer，鼠标悬浮时变为手型指针，提供明确的交互提示。checkbox使用绝对定位并将top设为负100像素，将其移动到屏幕可视区域之外，实现隐藏效果。

滑动面板样式设计

aside面板需要设置为固定定位，并通过负的right属性值将其隐藏在屏幕右侧外部。

aside{background-color:#a60000;color:white;width:340px;height:98%;padding:10px 1%;position:fixed;top:0;right:-370px;transition:0.6s all;}

面板背景色和文字颜色与之前的实例保持一致。宽度340像素，高度98%接近全屏高度。内边距使用复合写法，上下10像素，左右1%。固定定位使其相对于视口定位，top为0紧贴顶部。right属性值为负370像素是关键设计，面板宽度340像素加上左右各1%的内边距约为360像素，负370像素将面板完全隐藏在屏幕右侧外部。transition属性设置了0.6秒的过渡效果，使状态变化时产生平滑的滑动动画。

选中状态控制显示

使用相邻兄弟选择器和checked伪类根据checkbox状态控制面板位置。

input[type="checkbox"]:checked + aside{right:0px;}

这个选择器的含义是：选中类型为checkbox且处于checked状态的input元素，选择与其紧邻的aside兄弟元素，将该aside元素的right属性值设置为0像素。当checkbox被选中时，面板从屏幕右侧外部滑入可见区域。再次点击label标签会取消checkbox的选中状态，选择器不再匹配，right属性恢复为默认的负370像素，面板重新滑出隐藏。

总结：定位属性的实践价值

通过以上三个实例的完整练习，我们对CSS定位属性的实际应用有了深入的理解。

第一个实例展示了绝对定位在实现选项卡切换中的核心作用，通过将所有面板重叠并通过z-index控制显示层级，实现了高效的空间利用。第二个实例演示了固定定位在创建始终可见的悬浮组件中的应用，以及如何通过外边距避让来避免内容重叠。第三个实例则巧妙结合绝对定位、固定定位和CSS过渡，配合checkbox hack技术实现了纯CSS的滑动面板效果。

这三个实例难度递进，从传统的JavaScript辅助实现到纯CSS的状态管理，展示了CSS定位属性从基础到进阶的应用路径。掌握这些技术后，读者应该能够独立实现类似的功能，并将这些模式灵活运用于实际项目中。定位虽然是CSS中较为复杂的主题，但通过大量的实践练习，这些概念终将成为前端开发工具箱中得心应手的工具。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！