Question

这是一个例子：

我有一个div，我想在上面画一些条纹。它工作正常，除非我在div上滚动x，我再也看不到它了。这是HTML代码：

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

CSS：

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
}

.inner {
  width: 1000px;
  height: 200px;
}

.bg {
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

它是我试图实现的非常简化的版本。将其设置为position: fixed似乎不是一个选项？

Answer 1

这是非常不可能的。

为子项指定100％宽度时，表示父项宽度不是文档。

除了使父级溢出为<div class="inner">且宽度为1000xp的情况，其中条纹被分配给<div class="bg">，其宽度为100％，等于父级的宽度。

所以改为将条纹应用到.outer，当孩子们溢出时，它会保持背景。

＆＃13;

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
}

.inner {
  width: 1000px;
  height: 200px;
}

.bg {

  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

＆＃13;

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

＆＃13;

Answer 2

你在找这个吗？ updated fiddle

目前bg只占其父母的100％，即300px。因此，将其更改为固定值，如

width: 500px;

Answer 3

您在绝对定位中设置了相对于外部容器的条带div，因此它获得了100％的外部div宽度（300px）。

如果要获取其全宽（在这种情况下为1000px或其他），则应将条带div relative 设置为内部div。

试试这个：

HTML

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

CSS

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
}

.inner {
  position: relative;
  width: 1000px;
  height: 200px;
}

.bg {
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

Answer 4

您必须更改布局或将条纹移动到其他项目。

例如，您可以将它们添加到.outer div：

.outer {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
   background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 0.7em;
}

updated fiddle

CSS滚动的CSS绝对位置

4 个答案: