当以百分比声明父级宽度时，固定位置的子级是否具有与其父级相同的确切宽度？

Question

多数使用情况都知道固定元素从不相对于其父级，而是相对于端口大小，因此将其宽度或高度设置为100％将使其相对于其父级而不是相对于端口大小。 有一种解决方法，那就是使用关键字“ inherit”代替声明其宽度，但是这样做有一个问题：

 #wrap1 { border: 1px solid black; position: relative; width: 250px; height: 250px; margin: 0 auto; } #fixed1 { border: 1px solid red; position: fixed; width: inherit; } 

 <div id = 'wrap1'> <div id = 'fixed1'> fixed </div> </div> 

^ ---以像素为单位声明固定元素父元素的大小时，固定元素与其父元素的大小匹配，但是...

 #wrap2 { border: 1px solid black; position: relative; width: 50%; height: 250px; margin: 0 auto; } #fixed2 { border: 1px solid red; position: fixed; width: inherit; } 

 <div id = 'wrap2'> <div id = 'fixed2'> fixed </div> </div> 

^ ---您在这里看不到预期的效果，即孩子的宽度恰好是父母宽度的一半，而不是父母宽度的一半，因为父母宽度是50％，像素 但是，当代码不在SO的代码片段上运行时，这正是您所看到的。

当以百分比声明其父级的宽度时，是否可以让固定位置的子级具有与其父级相同的确切宽度？

Answer 1

此处的原因是位置固定的元素是相对于视口的-宽度测量的百分比是相对于视口本身的。 在您的百分比示例中，父对象的width: 50%是相对于body减去body的16px边距计算得出的。 您的固定元素继承了width: 50%其父元素的width: 50% ，但百分比是相对于整个视口计算的，该视口完全环绕了主体及其边缘（因此，固定元素延伸到其父元素之外）。

可以给固定元素赋予其父对象宽度的一种解决方案是从主体中删除边距。

 body { margin: 0; } #wrap2 { border: 1px solid black; position: relative; width: 50%; height: 250px; margin: 0 auto; } #fixed2 { border: 1px solid red; position: fixed; width: inherit; } 

 <div id = 'wrap2'> <div id = 'fixed2'> fixed </div> </div> 

Answer 2

如下更改您的＃fixed2 CSS样式。

#fixed2 {
border: 1px solid red;
position: inherit;
width: 100%;
margin: 0 auto;
}