javascript - 始终在 div 内定位固定元素

Question

我需要能够始终在 div 内定位固定元素。调整窗口大小时出现问题。然后固定的 div 总是浮动在所有其他元素之上。如何防止这种情况？我需要固定该 div 但位于 div 内。

这是一个例子：

<div id="main">
    <div id="one" style="background-color:yellow;"></div>
    <div id="two" style="background-color:black;"></div>
    <div id="three" style="background-color:yellow;">
        <div id="four"></div>
    </div>
</div>

CSS：

#main
{
    position:relative;
    width:1200px;
    top:0;
    bottom:0;
    left:100px;
}
#one,#two,#three
{
    position:relative;
    width:100px;
    height:1000px;
    float:left;
    top:0;
    bottom:0;
}
#four
{
    position:fixed;
    top:50px;
    background-color:blue;
    width:100px;
    height:200px;
}

示例尝试左右移动水平滚动条，您将看到发生了什么。

Answer 1

将位置更改为相对。

例子

#four {
    background-color: blue;
    height: 200px;
    position: relative;
    top: 50px;
    width: 100px;
}

Answer 2

在类似问题上查看此答案。不幸的是，您面临的问题是仅靠 CSS 无法解决的问题。