Question

我有一个居中的容器，我需要在左侧和右侧粘贴两个元素，这就像背景一样。我可以使用:before和:after元素完成此操作，这些元素将与left: -<element_width>;和right: -<element_width>绝对定位。问题是我需要他们的职位为fixed而fixed定位相对于父母而言并不起作用。

这是fiddle。

我怎样才能做到这一点？我不介意在旧版浏览器中无法使用的新css技巧。

Answer 1

您可以使用position: fixed和calc来实现

检查下面更新的css

.content {
    width: 50%;
    height: 2000px;
    margin: 0 auto;
    position: relative;
    background: white;
}

.content:before {
    content: "";
    display: block;
    width: 50px;
    height: 200px;
    position: fixed; //fixed position
    left: calc(50% - 25% - 50px); // used calc to determine the correct position
    background: red;
}

<强>解释 left: calc(50% - 25% - 50px);

50%是将项目放在页面的中心。

-25%是父容器的值50%

的一半

-50px是:before的宽度，可将其移至左侧

快速注意：大多数浏览器会将left位置元素的默认top和fixed位置设置为相同left和其父容器的top，如果您使用position:fixed而未指定left和top，则固定元素将默认为其父元素位置

上面评论中提到的

编辑 position:sticky也可以解决这个问题，但它可能会对旧浏览器和移动设备产生一些不同的行为。

如何将固定元件粘贴到中心容器的侧面？

1 个答案: