绝对定位

实现渐变边框需用技巧，因border不支持渐变。推荐用background-clip：设border为透明，背景用linear-gradient并裁剪至border-box，使渐变仅在边框显示；或用伪元素模拟，通过绝对定位和z-index创建外层渐变层，适用于复杂形状；outline不支持渐变故不可…

使用Flexbox实现一侧固定、一侧自适应的响应式布局，结合position处理局部定位需求。1. 父容器设display: flex，固定元素设宽度，流动元素设flex: 1；2. 需绝对定位时，在flex子项内设置position: relative/absolute，确保层级清晰；3. 移动端…

绝对定位元素脱离文档流，相对于最近的已定位祖先定位；若父容器设为relative，则子元素以该容器为参考，通过top、left等属性精确定位，常用于模态框、图标叠加、下拉菜单等场景，需注意包含块、尺寸控制及响应式适配，避免布局错乱。 在CSS布局中，position: absolute 是一种强大的…

响应式定位布局需结合media query与position属性，根据不同屏幕尺寸调整元素位置。首先掌握position的五种取值：static、relative、absolute、fixed和sticky。在移动端常使用static或relative保证布局流畅，而在桌面端可采用fixed实现侧边…

利用CSS的:focus与::after伪元素可实现输入框聚焦时的提示效果；2. 推荐使用父容器结合:focus-within与::after显示提示内容；3. 也可通过相邻兄弟选择器使聚焦后兄弟元素显示提示；4. 注意定位、层级及移动端适配，复杂场景仍需JavaScript。 当用户点击输入框时，…

掌握CSS宽高需理解盒模型：默认content-box下width不包括padding和border，总宽为内容+内边距+边框；使用box-sizing: border-box可让width包含内边距和边框，便于布局控制。百分比宽度基于父元素内容区宽度，高度百分比需父元素有明确高度，否则无效。视口单…

浮动与定位可组合使用以实现复杂布局，float用于多栏结构，position用于精确定位；例如侧边栏浮动固定，内容区通过margin避让并创建定位上下文，内部元素用absolute定位；需注意clear清除浮动、避免高度塌陷，并合理利用relative建立定位参考，z-index控制层级，兼顾老浏览…

通过position: relative与position: absolute配合，可精准定位卡片内的角标、遮罩等元素。首先设置.card为relative以创建定位上下文，再将.badge或.overlay设为absolute，使其相对于卡片定位；利用top、right等属性精确控制位置，实现右上…

浮动元素（float）在网页布局中常用于实现文字环绕图片或并排排列模块，但使用时容易出现层叠遮挡问题。尤其当页面中有定位元素（如 relative、absolute）或设置了 z-index 时，视觉层级混乱的情况更加明显。要解决这类问题，关键在于理解 float、position 和 z-inde…

通过设置父容器为relative并利用百分比宽度、left/right控制、max-width限制及transform居中，可实现absolute定位元素的宽度自适应，关键在于理解包含块机制与灵活运用布局属性。 在使用 CSS position: absolute 定位元素时，实现宽度自适应常用于弹…