css z-index pointer-events

Question

So my problem is, I want to be able to click through the .row because it's width fills the window but not the .fourcol because that has content like links and images. Is there something I'm missing with CSS? or can I achieve this with jquery?

My CSS and HTML is like this:

<div class="container >
   <div class="row">
     <div class="fourcol>
       <p>Content</p>
     </div>
   </div>
</div>

Then I have something underneath

<div class="drag">
<img src="image.png"/>
</div>

With the CSS:

.row {
width: 100%;
max-width: 1240px;
min-width: 755px;
overflow: hidden;
z-index: 1;
}

.fourcol {
z-index: 3;
}

Then I position .drag with position: absolute; and z-index: 2; just near <p>content</p>

Thanks heaps.

Scott · Accepted Answer · 2012-02-15 06:26:52Z

3

z-index only works when there is a position property. So the z-index for .row will do nothing. You need to add position: relative; as a minimum. Then adding the .drag div inside the .fourcol div with the higher z-index, should cause it to come forward. Although you may need to use a value higher than 2.

answered Feb 15, 2012 at 6:26

Scott

21.9k8 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Scott Over a year ago

That all seems to work well here in Chrome. White elements above the background, but behind the text.

uriah Over a year ago

Thanks I hope I don't run into any usability problems.

Ohgodwhy Over a year ago

I just wanted to toss in a link that discusses z-index and overlay to great length. It really helped me in getting a solid grasp in understanding how stacking works. -> css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

Collectives™ on Stack Overflow

css z-index pointer-events

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related