z-index with position: relative

Sat Aug 10 06:59:37 BST 2002

ooops. A little too early on the send button for the recreation. Here is the one that really
demonstrates the problem...

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
 <head>
<title>
test
</title>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="Content-Language" content="en" />

</head>
<body>

<div style="position: absolute; background-color: blue;">

<div style="position: relative; width: 300px; height: 300px; z-index: 1; background-color:
red;"> </div>
<div style="position: relative; top: -300px; width: 200px; z-index: 0; height: 350px;
background-color: pink"> </div>

</div>

<div style="position: absolute; top: 20px; left: 400px; width: 400px; height: 350px; z-index: 0;
background-color: pink"> </div>

<div style="position: absolute; top: 20px; left: 400px; width: 300px; height: 300px; z-index: 1;
background-color: red;"> </div>

</body></html>

--- David Joham <djoham at yahoo.com> wrote:
> 	
> Hello all!
> 
> I'm trying to get some divs to position themselves correctly when I use position: absolute and
> z-index and I'm having trouble  with Konq 3.01.
> 
> In the following sample, I've got two sets of divs. One uses position: absolute and the other
> uses
> position: relative. The position:absolute guys work just as I would expect. However, the
> position:
> relative divs do not. In both cases, the red div should be on top of the pink div. However, when
> using position: relative, the pink div is on top. Mozilla and Opera display this properly.
> 
> Is this a problem in Konq, or am I doing something wrong? I imagine if it's a problem in Konq,
> fixing it may be as simple as adding "relative" to a case statement somewhere in the z-index
> code
> where "absolute" is now when deciding whether or not to apply the z-index.
> 
> Any thoughts?
> 
> 
> *************************************************
> recreation follows
> *************************************************
> 
> 
> <?xml version="1.0" encoding="ISO-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
>  <head>
> <title>
> test
> </title>
> <meta http-equiv="Content-Type" content="text/html" />
> <meta http-equiv="Content-Language" content="en" />
> 
> </head>
> <body>
> 
> <div style="position: absolute; background-color: blue;">
> 
> <div style="position: relative; width: 300px; height: 300px; z-index: 1; background-color:
> red;"> </div>
> <div style="position: relative; top: -300px; width: 200px; z-index: 0; height: 350px;
> background-color: pink"> </div>
> 
> </div>
> 
> 
> 
> <div style="position: absolute; top: 20px; left: 400px; width: 300px; height: 300px; z-index: 1;
> background-color: red;"> </div>
> <div style="position: relative; top: 20px; left: 400px; width: 400px; height: 350px; z-index: 0;
> background-color: pink"> </div>
> 
> 
> 
> </body></html>
> 
> 
> 
> 
> __________________________________________________
> Do You Yahoo!?
> HotJobs - Search Thousands of New Jobs
> http://www.hotjobs.com

__________________________________________________
Do You Yahoo!?
HotJobs - Search Thousands of New Jobs
http://www.hotjobs.com