Question

你好

请查看我的jsfiddle。

内部div元素的内容是可滚动的。

每个灰色符号都有左边距。滚动内容时，符号不应固定在背景中。

它应该可以用位置滚动。

你知道我是如何实现这种效果的吗？

Answer 1

请注意，定位相对于最近的定位父级。

当您为“symb”类指定绝对位置时，您将相对于文档而不是其父级定位它们。

只需添加“position：relative;”你的div.tl元素将父div设置为定位而不移动它，“symb”元素将按我认为你期望的方式行事。

您的新.tl定义应为：

.tl {
    width: 500x;
    height: 80px;
    background-color:grey;
    position: relative;
}

此外，我假设你有必要绝对定位这些。只需删除.symb定义的“position：absolute”部分即可获得类似的结果。

您正在设置边距，而不是位置，所以在您的示例中您根本不需要考虑定位。

Answer 2

我不确定你需要什么。你最后一个“符号”中有一个错误 - 你错过了'px'中的'p'。试试这个？

<div class ="outer">
    <div class="inner">
            <div class="tl">
                <div class="box" style="width: 315px;">
                    <div class="symb" style="margin-left: 0px;"></div>
                    <div class="symb" style="margin-left: 15px;"></div>
                    <div class="symb" style="margin-left: 20px;"></div>
                </div>
        </div>
    </div>
</div>

.outer {
    width:50%;
}
.inner {
    overflow-x:scroll;
}
.tl {
    width: 500x;
    height: 80px;
    background-color:grey;
}
.box {
    float: left;
    height: 61px;
}

.box .symb {
    float:left;
    width: 5px;
    height: 5px;
    background-color: #cccccc;
    z-index: 999;
    margin-top: 10px;
}

Answer 3

使用

position: relative;

不

position: absolute;

尝试使用以下CSS：

.box .symb {
    position: relative;
    float: left;
    position: inline-block;
    width: 5px;
    height: 5px;
    background-color: #cccccc;
    z-index: 999;
    margin-top: 10px;
}

在可滚动内容中定位固定边距div

3 个答案: