html - 如何使本身以百分比定义的父div的固定div宽度？

Question

我在将固定的 div 设为其父元素的宽度时遇到问题，该元素本身是相对于另一个 div 定义的。

一开始可能不太清楚，所以这里有一段代码可以说明情况:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="fixed"></div>
    </div>
</div>

CSS

.grandparent {
     width:100px;
     position:relative;
 }

.parent {
     width:70%;
     position:relative;
 }

.fixed {
     width:100%;
     position:fixed;   /* This div must be fixed and have 100% width relative to parent */
 }

这是一个JSFiddle .

.fixed div 有什么方法可以在固定位置的同时继承其父级的宽度吗？

谢谢。

Answer 1

使用 position: absolute 而不是 position: fixed。

绝对定位适用于第一个相对父级。固定适用于窗口。

然后，您可以使用 top、left、right 和 bottom< 将 div 相对于其父级放置在视口(viewport)中 属性。

fiddle :https://jsfiddle.net/k0vndvzj/3/