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.

Answer 1

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.