Stupid z-index problem

HTML & CSS
1

I am not sure If this problem can be solved with just CSS or that I need jQuery, so excuse me if I post this in the wrong forum. I have a parent div holding two other divs.


   <div id="content">
    <div id='contact'>
      <h1>Bericht</h1>
      <form action="" method="post">
        <textarea name="bericht" class="textarea"></textarea>
        <input class="bericht_button" name="submit" type="submit" value="Verstuur bericht">
      </form>				
    </div>
    <div id="main"></div> 
  </div>

The first div is holding a contact form and is positioned absolute:


#contact {
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -25%;
  z-index: 1;
}

The second one is a div where with javascrip another page is loaded in consisting of on one a div that should overlap div #contact as soon as it is submitted indicating that there are no new messages and on the other hand two sidebars and a column with messages which is aligned just under the form in div #contact:


#main {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;	
  position: relative;
  z-index: 1;
}

Everything ok so far, the divs are aligned well the only problem I have is that with both divs having z-index 1 the form is not accessible. Setting the z-index for div #contact to 2 is not an option, for the above reason with the div that should overlap the contact form once submitted.

Note: The contact form is not included in the page that is loaded because I am refreshing div #main every 10 seconds.

Is this something that can be done with just CSS?

Thank you in advance

2

Could you paste a link to your page for clearer view ?

3

At the moment I am still working off-line

4

While I am having problems visualizing what you are trying to accomplish, I think that your issue stems from the placement of your elements within the source code. #contact and #main are children of the same element as such they will be ‘layered’ from the same relative plane ( if that makes sense).

I am assuming that you don’t need/want content overlap, if so why not make #main 50% wide, and margin-left:50% ( besides horizontally centering a 100% width element is superfluous anyway)

If you do need #main to COVER the form then no amount of z-index or query will help.

Your best option (if you are supporting IE9+) , is pointer-events.

hope that helps.

5

Hi,

Regarding your centering then don’t use the negative margin-left approach as that lets the element slide off the left of the screen at small sizes.


#contact {
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -25%;
  z-index: 1;
}

Just use auto positioing and left and right co-ordinates at zero.

e.g.


#contact {
  width: 50%;
  position: absolute;
  top: 0;
  left:0;
right:0;
[B]margin:0 auto;[/B]/* this will center the element horizontally (and vertically if needed using top and bottom:0) */
   z-index: 1;
}

Regarding your original question you lost me along the way :slight_smile:

How can you have an element be on top and not on top at the same time? If you want a message on top after you have submitted the form then you will need to call it after you have submitted the form.

Or did we all misunderstand?

6

This works great Paul, thanks a lot :slight_smile:

Let me try to explain a bit better. I have a page berichten (messages) The content with messages is loaded dynamicly. Originally the heading and contact form were included in the loaded content as well but since I refresh the dynamic content every 10 seconds, because of usability, I took the heading and form out and added it to the main page div #contact.

On the page that is dynamicly loaded I have an PHP if else statement:


if ($new_mes){
  // Show new messages
}else{
  echo "<div class='no_messages'>";
  echo "<p>Currently there are no new messages</p>";	
  echo "<div class='loading'><img src='images/ajax-loader.gif' alt=''></div>";
echo "</div>";

}

In other words when there are new message show them (this is included the heading and form on the main page ), if there are no new messag show the div that is telling there are no new messages. Like I said. In order to use the form I need div #contact on z-index 2 and div #main on z-index 1, while when there are no new message I actually need div #main (incl. div no_messages) on z-index 2 and div#contact on z-index 1 so div no_messages will cover the heading and the form.

I hope this is a bit clearer.

7

Hi,

It sounds to me as though you will need to program this behaviour as both scenarios cannot be true at one time (unless I misunderstand the concept). You could add a class to Content when there are messages shown and manipulate the z-indexes of the nested children appropriately. If there are no new messages then the class on Content should be removed.

Maybe a screenshot of what you get at the moment may help but it sounds like you need some dynamic behaviour here.

8

No you don’t understand it wrong. Both scenarios can’t be true. And this is where I am breaking my head over for days already

I am not sure what you mean with this or better how to approach it

I will make a draw of what I mean!

9

That will help :slight_smile: