企业官网建设流程全解析

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;/* ✅ 生效 */}

不会继承的常见属性(布局类)

会继承的属性(文本类,少数)

一句话记忆

布局类属性(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 的四种值

五个必须配合 position 的属性