CODEWITHSUNDEEP
css
Johann
Johann

Reputation: 29867

Scrolling background showing through overlay div

Here's my code:

<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/

The colored div at the top acts as an overlay. I set the z-index but the text in the div below it still shows through. I don't want this text showing through. Not sure what the problem is. My real problem however is how to allow the user to scroll the content below the overlay when they are scrolling on the overlay.

UPDATE: Bas van Dijk fixed the problem. Seems like you can't use /> on the second line but must use . That's weird. Anyways, my real code doesn't have this problem because I do use the closing div. But back to my real issue. I want to allow the user to scroll on the header which simply passes the scroll event down to the div beneath it.

Upvotes: 0

Views: 49

Answers (2)

Harpreet Singh
Harpreet Singh

Reputation: 979

can you take your text div out of outer div like this :-

<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>

Upvotes: 0

Bas van Dijk
Bas van Dijk

Reputation: 10713

I have switched the absolute and relative for both divs: 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">

And added put pointer-events:none to overlay as described in the comments

Upvotes: 1

Related Questions