1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

z-index isn't working?

         

jonasisme

9:48 am on Jul 21, 2011 (gmt 0)

10+ Year Member



Hi people..

i'm trying to make a rectangle and then on the right side i want to have a rectangle that is overlapping the one beneath..

i'll post a picture because it's difficult to explain..

http://img30.imageshack.us/img30/6703/helpftp.png [imageshack.us]



so this is my code:

red rectangle: 
div.wrapper {

display: none;
width: 600px;

z-index: 9999;
}


green rectangle: 
div#optin-container {
background: GRADIENT_FROM;

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(GRADIENT_FROM), to(GRADIENT_TO));

/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, GRADIENT_FROM, GRADIENT_TO);

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='GRADIENT_FROM', endColorStr='GRADIENT_TO');

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='GRADIENT_FROM', endColorstr='GRADIENT_TO')";

-webkit-box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px black;

margin: 10px 0;
width: 600px;
float: right;
z-index: 9999;


-moz-border-radius: 5px;
border-radius: 5px;
}


div.wrapper div.optin-form-container {

width: 200px;
height: auto;
margin-bottom: 15px;

-moz-border-radius: 5px;
border-radius: 5px;
line-height: 40px;
z-index: 999999998;
float: right;
margin-right: 20px;

background: GRADIENT_FROM_SUB;

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(GRADIENT_FROM_SUB), to(GRADIENT_TO_SUB));

/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, GRADIENT_FROM_SUB, GRADIENT_TO_SUB);

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='GRADIENT_FROM_SUB', endColorStr='GRADIENT_TO_SUB');

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='GRADIENT_FROM_SUB', endColorstr='GRADIENT_TO_SUB')";

-webkit-box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px black;
}



html: 

<div class="style-wrapper">
<div id="optin-container">
// code
</div>
<div class="optin-form-container">
// code
</div>
</div>


note if i remove the float: right; from div#optin-container then it works.. but then i don't see my gradient.. because the height is 0.
I tried clear: both etc but it didn't work


Please help me out!


Thanks!

birdbrain

12:41 pm on Jul 21, 2011 (gmt 0)



Hi there jonasisme,

try it like this... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859- 
1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>untitled document</title> 
 
<style type="text/css"> 
#container { 
 position:relative; 
 width:600px; 
 padding:32px 0; 
 margin:auto; 
 } 
#green { 
 height:202px; 
 background-image:-o-linear-gradient(rgb(0,255,0),rgb(0,204,0)); 
 background:-webkit-gradient(linear,left top,left bottom,from(#0f0),to(#0c0)); 
 background:-moz-linear-gradient(top,#0f0,#0c0); 
 filter:progid:DXImageTransform.Microsoft.gradient 
(startColorstr='#00ff00',endColorstr='#00cc00',GradientType=0); 
 } 
#blue { 
 position:absolute; 
 width:140px; 
 height:266px; 
 top:0; 
 right:42px; 
 background-image:-o-linear-gradient(rgb(0,0,204),rgb(0,0,255)); 
 background:-webkit-gradient(linear,left top,left bottom,from(#00c),to(#00f)); 
 background:-moz-linear-gradient(top,#00c,#00f); 
 filter:progid:DXImageTransform.Microsoft.gradient 
(startColorstr='#0000cc',endColorstr='#0000ff',GradientType=0);  
 } 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
 <div id="green"></div> 
 <div id="blue"></div> 
</div> 
 
</body> 
</html>

birdbrain

[edited by: alt131 at 2:01 pm (utc) on Jul 21, 2011]
[edit reason] Side Scroll [/edit]

jonasisme

12:47 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



i forgot to say that i didn't want to position it absolute.. because then the height won't automatically fill.. :)

i had it first with absolute, that worked fine and yours will probally work fine too, but i want it without absolute positioning.. any ideas?

Thanks though!

birdbrain

1:51 pm on Jul 21, 2011 (gmt 0)



Hi there jonasisme,

z-index isn't working?

As the z-index attribute only works with positioned elements, my solution was tailored to your problem.

Here is an alternative solution... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>untitled document</title> 
 
<style type="text/css"> 
#container { 
 width:600px; 
 padding-top:32px; 
 border:1px solid #f00; 
 margin:auto; 
 overflow:hidden; 
 } 
#green { 
 height:202px; 
 background-image:-o-linear-gradient(rgb(0,255,0),rgb(0,204,0)); 
 background:-webkit-gradient(linear,left top,left bottom,from(#0f0),to(#0c0)); 
 background:-moz-linear-gradient(top,#0f0,#0c0); 
 filter:progid:DXImageTransform.Microsoft.gradient 
(startColorstr='#00ff00',endColorstr='#00cc00',GradientType=0); 
 } 
#blue { 
 position:relative; 
 float:right; 
 width:140px; 
 min-height:266px; 
 margin:-234px 42px 0 0; 
 background-image:-o-linear-gradient(rgb(0,0,204),rgb(0,0,255)); 
 background:-webkit-gradient(linear,left top,left bottom,from 
(#00c),to(#00f)); 
 background:-moz-linear-gradient(top,#00c,#00f); 
 filter:progid:DXImageTransform.Microsoft.gradient 
(startColorstr='#0000cc',endColorstr='#0000ff',GradientType=0);  
 } 
#blue p { 
 margin:10px 5px; 
 font-family:verdana,sans-serif; 
 font-size:10px;  
 color:#fff; 
 line-height:1.5; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="container"> 
 
<div id="green"></div> 
 
<div id="blue"> 
<p> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac  
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh  
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,  
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare  
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.  
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum  
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.  
Pellentesque in dui. In eget elit. Praesent eu lorem. 
</p> 
</div> 
 
</div> 
 
</body> 
</html>

birdbrain

[edited by: alt131 at 2:02 pm (utc) on Jul 21, 2011]
[edit reason] Side Scroll [/edit]

jonasisme

2:14 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



yes that is exactly what i needed i think! I'll let you know soon!

Thank you very much!

jonasisme

3:27 pm on Jul 21, 2011 (gmt 0)

10+ Year Member



well yeah i got it working..thanks!

birdbrain

5:34 pm on Jul 21, 2011 (gmt 0)



No problem, you're very welcome. ;)

alt131

10:04 am on Jul 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi jonasisme, pleased you got a solution, but it would be really helpful for later readers if you could identify what made it "work"
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026