Div won't display 'on top' of other div

denno020 · August 26, 2012

It's late at the moment, so I could be missing something really simple, but I can't, for the life of me, get my sub nav div to be layered on top of my content div. I want it to be over so that when I click on a link, I can change the border of the sub navigation link to white, to make it appear that it's a tab that's opened to that page.

I've created a test html file which still has the same problem, but I can atleast share it here and people can run it themselves to see what I'm talking about. I've tried playing with z-index's, but it's possible that I'm using them completely wrong, as I've never really studied them too much.

Anyway, the following is the code, and the way I was testing was to see if the red right hand border of the sub navigation links would display above the grey border of the main content.

You can copy the code below, or play with it on jsfiddle: http://jsfiddle.net/denno020/WJxD7/

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">
.wrapper{
position: relative;
width: 1022px;
margin: 0px auto;
}
#main_content #content{
line-height: 25px;
z-index: -2;
}
.height{
height: 295px;
}
.grid_back{
background-color: white;
border: 1px solid grey;
}
.grid1{
width: 128px;
margin: 3px;
padding: 5px;
float: left;
overflow-y: auto;
}
.grid6{
width: 858px;
margin: 3px;
padding: 5px;
float: left;
overflow-y: auto;
}
#sub_nav{
overflow:visible;
}
#sub_nav ul li{
margin-right: -12px;
padding-right: 10px;
border: 1px solid red;
text-align: right;
background-color: white;
height: 35px;
line-height: 35px;
list-style: none;
z-index: 1;
}
#sub_nav ul li.current{
border-right: 1px solid white;
}
</style>

</head>
<body>

<section id="main_content" class="wrapper">
<div id="sub_nav" class="grid1">
<ul>
	<li><a href="#">Facilities</a></li>
	<li><a href="#">Volunteers</a></li>
	<li><a href="#">Sponsors</a></li>
	<li><a href="#">Events</a></li>
</ul>
</div>
<div id="content" class="grid6 grid_back"><h1>Club</h1>
<p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p></div>
<div class="clear_float"></div>
</section>

</body>
</html>

Hopefully my problem makes sense.

Any help, as always, is greatly appreciated.

Thanks

Denno

White_Lily · August 26, 2012

Do you mind if I copy the code onto my own webserver and have a play with it?

White_Lily · August 26, 2012

Okay, so i felt i should try and fix this anyway. I think i have found the problem and your right it is simple, but its more knowledge based.

I assume you dont know about positions div's and z-index's.

In order for z-indexing to work properly, you need to make all div's with a z-index have a position.

e.g:

.content

{

position:relative;

width:950px;

height:50px;

z-index:-1;

}

.nav

{

position:relative;

width:50px;

height:50px;

z-index:1;

}

with some extra styling such as margin/padding, once you get the classes so that they overlap, z-indexing and positioning works like so:

poistion:relative; "puts the position of the styled class/id in relative to its parent div."

z-index:1/-1; "a positive number (1) means that the div will always be on top of the negative number (-1)."

<!DOCTYPE html>
<html>
   <head>
      <title></title>

      <style type="text/css">
         .wrapper
         {
            position: relative;
            width: 1022px;
            margin: 0px auto;
         }
         
         #main_content #content
         {
            position:relative;
            line-height: 25px;
            z-index: -2;
         }
         
         .height
         {
            height: 295px;
         }
         
         .grid_back
         {
            background-color: white;
            border: 1px solid grey;
         }
         
         .grid1
         {
            width: 128px;
            margin: 3px;
            padding: 5px;
            float: left;
            overflow-y: auto;
         }
         
         .grid6
         {
            width: 858px;
            margin: 3px;
            padding: 5px;
            float: left;
            overflow-y: auto;
         }
         
         #sub_nav
         {
            overflow:visible;
         }
         
         #sub_nav ul li
         {
            position:relative;
            margin-right: -12px;
            padding-right: 10px;
            border: 1px solid red;
            text-align: right;
            background-color: white;
            height: 35px;
            line-height: 35px;
            list-style: none;
            z-index: 1;
         }
         
         #sub_nav ul li.current
         {
            border-right: 1px solid white;
         }
      </style>

      </head>
   <body>

   <section id="main_content" class="wrapper">
   <div id="sub_nav" class="grid1">
      <ul>
         <li><a href="#">Facilities</a></li>
         <li><a href="#">Volunteers</a></li>
         <li><a href="#">Sponsors</a></li>
         <li><a href="#">Events</a></li>
      </ul>
   <>
   <div id="content" class="grid6 grid_back"><h1>Club</h1>
   <p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><p>There's a whole heap of info here</p><>
   <div class="clear_float"><>
   </section>

   </body>
</html>

the above code is your fixed code, assuming i read correctly this layout is what you wanted.

i also took the time to clean it to. the indents should now make your code a bit easier to read.

denno020 · August 27, 2012

You're a champion mate, that is exactly what I needed .

I've used z-index's successfully before, however that was when I was using positioning extensively for the layout, so I didn't realize that it was related to the z-index working.

Thanks heaps .

Denno

White_Lily · August 27, 2012

No problem.

P.S: different positions do different things with z-indexing. So experiment with the positions and indexing.

positions available are:

relative

absolute

fixed

White_Lily · August 27, 2012

If you want an example of where positioning and z-indexing is used go to the site im currently developing:

http://janedealsart.co.uk/members/view.php?id=1

White_Lily · August 27, 2012

Sorry for the constant posting, but you should probably mark this case as "Solved".

denno020 · August 27, 2012

Thanks White_Lily, appreciate the extra info .

I'm pretty familiar with using the different positioning options, I just wasn't aware that it was directly related to z-index.

As for the constant posting, that's fine.. If you refreshed the page however, you would see that I marked it as solve about 30 minutes ago

Thanks again

Denno

Sign In

Div won't display 'on top' of other div

Recommended Posts

denno020

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

White_Lily

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information