position

📅 2026/8/8 9:27:37
position
CSS position 属性继承性核心结论position不会继承。每个元素的position默认都是static,不会从父元素继承。代码示例.parent{position:absolute;/* 父元素设了 absolute */}.child{/* 没写 position,默认是 static */top:100px;/* ❌ 不生效!child 还是 static */}正确写法:每个元素都要自己写position。.parent{position:absolute;}.child{position:relative;/* ✅ 自己也要写 */top:100px;/* ✅ 生效 */}不会继承的常见属性(布局类)属性默认值说明positionstatic每个元素独立displayinline/block(看标签)每个元素独立width/heightauto每个元素独立margin/padding0每个元素独立bordernone每个元素独立backgroundtransparent每个元素独立z-indexauto每个元素独立会继承的属性(文本类,少数)属性说明color文字颜色font-family字体font-size字号line-height行高text-align文本对齐visibility可见性一句话记忆布局类属性(position、display、width、margin 等)都不继承;文本类属性(color、font 等)会继承。实际案例在王者荣耀小乔页面中,.circles li设了position: absolute,但里面的.circle1还要再写一次position: relative,才能让top生效。.circles li{position:absolute;/* li 设了 absolute */}.circle1{position:relative;/* ✅ circle1 自己也要设 position */top:900px;/* ✅ 才能生效 */}position 的四种值值定位基准是否脱离文档流是否占原位置static(默认)不定位❌—relative自己原来的位置❌✅ 占(原位置保留)absolute最近的 position≠static 的祖先✅❌ 不占fixed视口(浏览器窗口)✅❌ 不占sticky滚动到阈值时变 fixed❌✅ 占五个必须配合 position 的属性属性作用top距离上方的偏移量left距离左方的偏移量right距离右方的偏移量bottom距离下方的偏移量z-index层叠顺序(谁盖谁)