Question

想象：

<div class="outer">
    <div class="inner">
    </div>
</div>

其中：

.outer是列结构的一部分，其宽度是百分位，因此是流动的。
.inner表示fixed位置元素，应填充.outer元素的100％宽度。但是它的位置垂直保持不变，因此fixed。

我尝试使用以下CSS实现此布局：

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

但是，.inner不会将其宽度计算为其relative父级的百分比。相反，它填充窗口/文档的整个宽度。尝试任何left或right属性都会产生相同的父级忽略质量。

有什么方法吗？

Answer 1

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

这应该可以解决问题。

Answer 2

position: fixed始终与窗口/浏览器相关，因此无法用于解决您的问题。固定定位会从DOM的自然顺序中移除元素，因此不再保留在外部div中，因此它需要浏览器的整个宽度而不是容器的宽度。您需要使用position: absolute来.inner相对于.outer。您将能够定位元素，并使其宽度包含在.outer div中。

Answer 3

使用此：

.inner { 位置：固定; 左：0; 右：0;

}

Answer 4

固定元素仅将绝对值作为宽度。如果父容器是流体（宽度是百分比），则需要动态设置固定元素的宽度。您需要获取包装容器的宽度并将其设置在粘性元素上。

CSS

.outer {width: 25%;}
.inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

此外，您可以在案例窗口调整大小时添加事件侦听器。

JS

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}

Answer 5

您可以查看我制作的jsfiddle，它说明了您的问题的修复方法，您可以完全按照您想要的方式使用此代码。

Answer 6

position:fixed始终相对于视口/浏览器窗口，而不是祖先。

Answer 7

使用类似fiddle的内容怎么样？

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}

流体宽度固定位置

7 个答案: