Question

这是我的代码：

<div style="position: relative">
  <div style="width: 300px; height: 100px; background-color: #d28d8d; position: relative; z-index: 1000" />
  <div style="width: 300px; height: 300px; position: absolute; border: 1px solid black; overflow-y:scroll">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
  </div>
</div>

https://jsfiddle.net/Deepview/t8chgkbx/1/

顶部的彩色div作为叠加层。我设置了z-index，但是它下面的div中的文本仍然显示出来。我不希望这个文字显示出来。不确定是什么问题。然而，我真正的问题是当用户在叠加层上滚动时，如何允许用户滚动叠加层下方的内容。

更新：Bas van Dijk解决了这个问题。好像你不能使用/＆gt;在第二行但必须使用。这很奇怪。无论如何，我的真实代码没有这个问题，因为我确实使用了结束div。但回到我的真正问题。我想允许用户滚动标题，它只是将滚动事件向下传递到它下面的div。

Answer 1

我已经切换了两个div的绝对值和相对值：https://jsfiddle.net/t8chgkbx/5/

<div style="position: relative">
<div style="width: 300px; height: 100px; background-color: #d28d8d; position: absolute; z-index: 1000"></div>
  <div style="width: 300px; height: 300px; position: relative; border: 1px solid black; overflow-y:scroll">

并按照评论

中的说明将put pointer-events:none添加到叠加层

Answer 2

你可以把你的文本div从这样的外部div中取出来： -

<div style="position: relative">
  <div style="width: 300px; height: 100px; background-color: #d28d8d; position: absolute; z-index: 3000" />
</div>
<div style="width: 300px; height: 300px; position: absolute; border: 1px solid black; overflow-y:scroll">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
</div>

滚动背景显示叠加div

2 个答案: