z-index problem

@G-SunAug 05.2009

Hi! I’m implementing a pop-up Google search box on my site.

However I have a little problem getting the z-index right.
My #Google-div is z-index 20 yet it’s displayed under an image with z-index 5 (Firfox 3). Any ideas what causes this to happen?

Fiirebug css inspector (#Google):

[CODE] element.style { display:block; } #Google { [i]display:none;[/i] position:absolute; right:-96px; top:-65px; width:218px; z-index:20;[/CODE]

(#Tittel , displayed over #Google)

[CODE] #Tittel1 { background-image:url(../Grafikk/Tittel.png); height:104px; left:347px; position:absolute; top:49px; width:384px; z-index:5;[/CODE]

Thanks!

to post a comment

CSS

8 Comments(s) _↴

@huckepickAug 05.2009 — #could you please post the html ?

@G-SunauthorAug 05.2009 — #Sure.. html:

[CODE]<div id="Tittel1"> <a href="/index.php"><img id="blank" src="Grafikk/blank.gif" border="0"  /></a> </div>
 ..
 <style type="text/css">
 1
 2@import url(http://www.google.com/cse/api/branding.css);
 </style>
 <div id="Google" class="cse-branding-bottom" style="display: none;">
 <div class="topleft"/>  //this is borders
 <div class="top"/>
 <div class="topright"/>
 <div class="left"/>
 <div class="middle"/>
 <div class="right"/>
 <div class="botleft"/>
 <div class="bottom"/>
 <div class="botright"/>
 <div class="cse-branding-form">
 <form id="cse-search-box" action="http://g-sun.no/search.php">
 <div>
 <input type="hidden" value="partner-pub-8400018598641363:9hs33v-ae7z" name="cx"/>
 <input type="hidden" value="FORID:9" name="cof"/>
 <input type="hidden" value="ISO-8859-1" name="ie"/>
 <input type="text" size="25" name="q"/>
 <input type="submit" value="Søk" name="sa"/>
 </div>
 </form>
 </div>
 <div class="cse-branding-logo">
 <img alt="Google" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif"/>
 </div>
 <div class="cse-branding-text"> Søk i g-sun.no </div>
 </div>[/CODE]

js (shouldn't affect this):

[CODE]	$('#Search').hover(
 function () {
 $('#Google').show();
 },
 function () {
 $('#Google').hide();
 }
 );[/CODE]

@huckepickAug 05.2009 — #I can not reproduce the issue.

I took your code and added background color on both ids and resized them to provoke overlaying: and it is just fine.

The red google thing that has z-index 20 is in front the other one (z-index 5) in the background

[code=html]
 
 
 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice" xmlns="http://www.w3.org/TR/REC-html40">
 
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>MedFlight Intranet - v4.0</title>
 <style>
 
 <!--
 
 #Tittel1 {
 background-image:url(../Grafikk/Tittel.png);
 height:104px;
 left:347px;
 position:absolute;
 top:49px;
 width:884px;
 z-index:5;
 background-color:#0f0;
 }
 
 #Google {
 background-color:#f00;
 display:none;
 position:absolute;
 right:-96px;
 top:-65px;
 width:818px;
 z-index:20;
 height:200px;
 }
 -->
 </style>
 </head>
 
 
 <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#004797" link="#004797" vlink="#004797" alink="#004797">
 <div id="Tittel1"> <a href="/index.php"><img id="blank" src="Grafikk/blank.gif" border="0"  /></a> </div>
 ..
 
 <div id="Google" class="cse-branding-bottom" style="display: block;">
 <div class="topleft"/> 

 <div class="top"/>
 <div class="topright"/>
 <div class="left"/>
 <div class="middle"/>
 <div class="right"/>
 <div class="botleft"/>
 <div class="bottom"/>
 <div class="botright"/>
 <div class="cse-branding-form">
 <form id="cse-search-box" action="http://g-sun.no/search.php">
 <div>
 <input type="hidden" value="partner-pub-8400018598641363:9hs33v-ae7z" name="cx"/>
 <input type="hidden" value="FORID:9" name="cof"/>
 <input type="hidden" value="ISO-8859-1" name="ie"/>
 <input type="text" size="25" name="q"/>
 <input type="submit" value="Søk" name="sa"/>
 </div>
 </form>
 </div>
 <div class="cse-branding-logo">
 <img alt="Google" src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif"/>
 </div>
 <div class="cse-branding-text"> Søk i g-sun.no </div>
 </div>
 
 
 </html> 
 
 [/code]

please check if you have described the error correctly

cu

huckepick

@G-SunauthorAug 05.2009 — #Thanks for your effort huckepick!

It's #Google {display:block;} but that doesn't change anything.

Checked your side, and had the same result as you.

However my problem is the same -in FF and IE8.

@G-SunauthorAug 05.2009 — #Actual css:

[CODE]
 #Google {
 width: 218px;
 position: absolute;
 right:-96px;
 top:-63px;
 z-index: 20;
 display: none;  //javascript sets this to block when hovered
 }
 #Google div {
 z-index: 20; 

 }
 [/CODE]

@G-SunauthorAug 05.2009 — #Seems like i higher level div (#StrekOppe) is taking predominance

[CODE]
 <div id="StrekOppe">
 <div class="left"/>
 <div class="middle">
 <div class="inside">
 <div>
 <div id="Flagg">
 </div>
 <div id="Search"><a href="/search.php" title="Søk i web-siden">Søk
 <img height="16" width="16" border="0" align="absbottom" alt="Søk i web-siden" src="/Grafikk/Search16x16.png"/>
 </a>
 <style type="text/css">
 1
 2@import url(http://www.google.com/cse/api/branding.css);
 </style>
 <div id="Google" class="cse-branding-bottom" style="display: none;">[/CODE]

I had z-index: 4

Changed it to 6, then everything was fine.

I don't understand it though..

[CODE]
 #StrekOppe {
 position: absolute;
 left: 10px;
 top: 135px;
 width: 830px;
 z-index: 6;   // was 4
 }
 [/CODE]

@huckepickAug 05.2009 — #k ... looks like your post didnt show the whole picture

to explain this issue:

an elements z-index is always related to the z-index of the elements that contain it

meaning, an element with z-index 99999999999 nested in an element with z-index 4 will always be displayed behind an element with z-index 5 that is defined on than same or an upper level than the containing one

or shorter: any child of an element with z-index 4 will be displayed behind an element with z-index 5 if both elements are in the same level of html hierarchy.

did this make sense?

cu

huckepick

@G-SunauthorAug 05.2009 — #Thanks! I wondered if that was the reason. Learning..

So, a workaround for me could be putting the other element (#Tittel1) in a div (putting it on a lower DOM-level)?

Also in #CSS _↴

Show hidden div Fixed Header Padding/Margin Issue

Success!

Help @G-Sun spread the word by sharing this article on Twitter...

Tweet This

z-index problem

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

z-index problem

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴