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

引言定位知识的实践应用在掌握了CSS定位的基础理论之后如何将这些知识应用于实际项目成为学习的下一个关键阶段。定位属性不仅仅是理论上的偏移和层叠更是构建复杂交互界面的基石。本文将通过三个由浅入深的实例练习从选项卡消息盒子到固定定位组件再到纯CSS实现的滑动面板完整展示定位属性在现代网页开发中的强大应用能力。每个实例都配有完整的代码实现和详细的解析确保读者能够真正理解并独立完成这些功能。一、列表消息盒子绝对定位实现选项卡切换选项卡消息盒子是在有限空间内展示大量信息的经典解决方案。这种设计模式广泛应用于策略游戏界面、移动端应用以及任何需要紧凑信息组织的场景。相比于传统的多页面跳转选项卡将所有内容集中在一个组件中避免了页面刷新带来的性能开销也更便于跨面板的数据共享。HTML结构搭建选项卡组件的HTML结构需要清晰地区分控制区域和内容区域。控制区域使用无序列表包含多个链接用于触发面板切换。内容区域使用容器包裹多个面板元素每个面板对应一个选项卡的具体内容。sectionclassinfo-boxulliahref#classactiveTab 1/a/liliahref#Tab 2/a/liliahref#Tab 3/a/li/uldivclasspanelsarticleclassactive-panelh2The first tab/h2pLorem 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/articlearticleh2The second tab/h2pThis tab hasnt got any Lorem Ipsum in it. But the content isnt very exciting all the same./p/articlearticleh2The third tab/h2pLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!/pollidui neque eleifend lorem, a auctor libero turpis at sem./liliAliquam ut porttitor urna./liliNulla 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负责响应用户点击并动态更新激活状态。vartabsdocument.querySelectorAll(.info-box li a);varpanelsdocument.querySelectorAll(.info-box article);for(i0;itabs.length;i){vartabtabs[i];setTabHandler(tab,i);}functionsetTabHandler(tab,tabPos){tab.onclickfunction(){for(i0;itabs.length;i){if(tabs[i].getAttribute(class)){tabs[i].removeAttribute(class);}}tab.setAttribute(class,active);for(i0;ipanels.length;i){if(panels[i].getAttribute(class)){panels[i].removeAttribute(class);}}panels[tabPos].setAttribute(class,active-panel);};}代码首先获取所有选项卡和所有面板的引用。使用for循环遍历每个选项卡为每个选项卡绑定点击事件处理函数。当选项卡被点击时先清除所有选项卡的class属性再为当前点击的选项卡添加active类。然后清除所有面板的class属性根据索引为对应的面板添加active-panel类实现面板切换。二、固定位置的列表消息盒子固定定位的应用在第一个实例的基础上我们将消息盒子嵌入到包含大量内容的完整网页中并使用固定定位使其始终停留在浏览器窗口的固定位置。这种设计模式在需要保持工具按钮或重要信息始终可见的场景中非常实用。添加主内容区域为了模拟真实网页环境需要在消息盒子之外添加大量的内容。sectionclassfake-contenth1Fake content/h1pThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis is fake content. Your main web page contents would probably go here./ppThis 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面板三个核心元素。labelfortoggle❔/labelinputtypecheckboxidtoggleaside!-- 面板内容 --/asidelabel标签的for属性与checkbox的id属性值相同建立了二者的关联。点击label标签时浏览器会自动触发checkbox的点击事件改变其checked状态。这是一种创造性地利用HTML标准特性的技术允许使用纯CSS来控制元素的显示与隐藏。表单元素样式设置label标签作为可见的触发按钮需要进行视觉样式设计。checkbox输入框则需要从视觉上隐藏但保持功能可用。label[fortoggle]{font-size:3rem;position:absolute;top:4px;right:5px;z-index:1;cursor:pointer;}input[typecheckbox]{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[typecheckbox]:checked aside{right:0px;}这个选择器的含义是选中类型为checkbox且处于checked状态的input元素选择与其紧邻的aside兄弟元素将该aside元素的right属性值设置为0像素。当checkbox被选中时面板从屏幕右侧外部滑入可见区域。再次点击label标签会取消checkbox的选中状态选择器不再匹配right属性恢复为默认的负370像素面板重新滑出隐藏。总结定位属性的实践价值通过以上三个实例的完整练习我们对CSS定位属性的实际应用有了深入的理解。实例定位类型核心技术实现方式选项卡消息盒子绝对定位position: absolutez-indexJavaScript控制class切换固定消息盒子固定定位position: fixed 外边距避让CSS固定定位内容区用margin-left避让滑动面板固定定位 绝对定位checkbox hack transition纯CSS利用:checked伪类控制第一个实例展示了绝对定位在实现选项卡切换中的核心作用通过将所有面板重叠并通过z-index控制显示层级实现了高效的空间利用。第二个实例演示了固定定位在创建始终可见的悬浮组件中的应用以及如何通过外边距避让来避免内容重叠。第三个实例则巧妙结合绝对定位、固定定位和CSS过渡配合checkbox hack技术实现了纯CSS的滑动面板效果。这三个实例难度递进从传统的JavaScript辅助实现到纯CSS的状态管理展示了CSS定位属性从基础到进阶的应用路径。掌握这些技术后读者应该能够独立实现类似的功能并将这些模式灵活运用于实际项目中。定位虽然是CSS中较为复杂的主题但通过大量的实践练习这些概念终将成为前端开发工具箱中得心应手的工具。还在纠结 CSS 样式写得杂乱无章、布局频频踩坑收藏此文持续跟进后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力