CODEWITHSUNDEEP
htmlcss
k-a-v
k-a-v

Reputation: 347

Select content under div css

I have a transparent <div> that has a width and height of 100% with content larger than itself so that it covers the entire screen and scrolls. I need to be able to select and hover over elements that are behind it. As can be seen by the example below, I am unable to do any of this. How do I fix this without removing the scrollable <div>?

#screen {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  background-color: transparent;
  overflow: auto;
}

#content {
  height: 200vh;
  width: 100%;
}
<div id='screen'>
    <div id='content'></div>
</div>
<span>highlight me!</span>
<button>click me!</button>

Upvotes: 0

Views: 570

Answers (2)

Logan
Logan

Reputation: 21

Try wrapping the div around the content;

<div id='screen'>
<span>highlight me!</span>
<button>click me!</button>
  </div>

Upvotes: 0

connexo
connexo

Reputation: 56813

Just add pointer-events: none; to the overlay div#screen:

#screen {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  background-color: transparent;
  pointer-events: none;
}
<div id='screen'></div>
<span>highlight me!</span>
<button>click me!</button>

That makes elements "click-through".

Upvotes: 3

Related Questions