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

你好

请看一下我的表

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

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

它应该可以随位置滚动

---

你知道我是如何达到那种效果的吗？

我不知道你需要什么。您在上一个“符号”中有一个错误-您在“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;
}

.外部{
宽度：50%；
}
.内部{
溢出-x：滚动；
}
.tl{
宽度：500倍；
高度：80px；
背景颜色：灰色；
}
.盒子{
浮动：左；
高度：61px；
}
.box.symb{
浮动：左；
宽度：5px；
高度：5px；
背景色：#中交；
z指数：999；
边缘顶部：10px；
}

使用

不是

只需尝试以下CSS：

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

---

请记住，定位是相对于最近的定位的父对象

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

只需在div.tl元素中添加“position:relative；”即可将父div设置为positioned，而无需移动它，“symb”元素将按照我认为您期望的方式运行

新的.tl定义应为：

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

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

---

您正在设置边距，而不是位置，因此在您的示例中根本不需要为定位而烦恼。

就是这样。谢谢你的提醒。我会尽快把它标记为已答复。

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

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