Stylesheets - Z-Index

Author

Z-Index

b_naick@yahoo.ca

2005-05-11, 7:29 pm

I have 2 "divs" in my page, as defined below.

Given teh z-index values, I would expect the text in the "flash" class
to overlay the video div.. But all I see is the video div.

Any idea what i am doing wrong.. happens in IE only..

-----

<div id="tempDiv" class="flash">
Text goes here
</div>
<div id="videoDiv" class="video">
OBJECT TAG TO DEFINE A REAL PLAYER PLUGIN
</div>

The stylesheet defs are as follows:

..video
{
position:absolute;
top: 0px;
left: 0px;
z-index: 0;
}
..flash
{
position:absolute;
top: 0px;
left: 0px;
width: 320px;
height: 240px;
background-color: green;
color: red;
z-index: 1000;
}

Martin Honnen

2005-05-11, 7:29 pm

b_naick@yahoo.ca wrote:

> I have 2 "divs" in my page, as defined below.
>
> Given teh z-index values, I would expect the text in the "flash" class
> to overlay the video div.. But all I see is the video div.
>
> Any idea what i am doing wrong.. happens in IE only..
>
> -----
>
> <div id="tempDiv" class="flash">
> Text goes here
> </div>
> <div id="videoDiv" class="video">
> OBJECT TAG TO DEFINE A REAL PLAYER PLUGIN
> </div>

Most plugins render their content on top of normal stuff, only some
plugins like Flash have (on Windows only I think) a setting
<object ...>
<param name="wmode" value="transparent">
</object>
to have contents rendered on the same z level as normal content.
Note that Flash performs worse in that mode.

--

Martin Honnen
http://JavaScript.FAQTs.com/

RobG

2005-05-11, 11:18 pm

b_naick@yahoo.ca wrote:
> I have 2 "divs" in my page, as defined below.
>
> Given teh z-index values, I would expect the text in the "flash" class
> to overlay the video div.. But all I see is the video div.
>
> Any idea what i am doing wrong.. happens in IE only..

In both Firefox and IE I get the green 'flash' div over the top of the
'video' div.

This is a CSS issue, try comp.infosystems.www.authoring.stylesheets

--
Rob

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>blah</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..video
{
position:absolute;
top: 0px;
left: 0px;
z-index: 0;
}
..flash
{
position:absolute;
top: 0px;
left: 0px;
width: 320px;
height: 240px;
background-color: green;
color: red;
z-index: 1000;
}
</style>
</head><body>

<div id="tempDiv" class="flash">Text goes here</div>

<div id="videoDiv" class="video">
OBJECT TAG TO DEFINE A REAL PLAYER PLUGIN
</div>

</body>
</html>

RobB

2005-05-12, 4:20 am

b_na...@yahoo.ca wrote:
> I have 2 "divs" in my page, as defined below.
>
> Given teh z-index values, I would expect the text in the "flash"
class
> to overlay the video div.. But all I see is the video div.
>
> Any idea what i am doing wrong.. happens in IE only..
>
> -----
>
> <div id="tempDiv" class="flash">
> Text goes here
> </div>
> <div id="videoDiv" class="video">
> OBJECT TAG TO DEFINE A REAL PLAYER PLUGIN
> </div>
>
> The stylesheet defs are as follows:
>
> .video
> {
> position:absolute;
> top: 0px;
> left: 0px;
> z-index: 0;
> }
> .flash
> {
> position:absolute;
> top: 0px;
> left: 0px;
> width: 320px;
> height: 240px;
> background-color: green;
> color: red;
> z-index: 1000;
> }

http://joshuaink.com/blog/82/flash-content-and-z-index

RobG

2005-05-14, 7:23 pm

b_naick@yahoo.ca wrote:
> I have 2 "divs" in my page, as defined below.
>
> Given teh z-index values, I would expect the text in the "flash" class
> to overlay the video div.. But all I see is the video div.
>
> Any idea what i am doing wrong.. happens in IE only..

In both Firefox and IE I get the green 'flash' div over the top of the
'video' div.

This is a CSS issue, try comp.infosystems.www.authoring.stylesheets

--
Rob

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>blah</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..video
{
position:absolute;
top: 0px;
left: 0px;
z-index: 0;
}
..flash
{
position:absolute;
top: 0px;
left: 0px;
width: 320px;
height: 240px;
background-color: green;
color: red;
z-index: 1000;
}
</style>
</head><body>

<div id="tempDiv" class="flash">Text goes here</div>

<div id="videoDiv" class="video">
OBJECT TAG TO DEFINE A REAL PLAYER PLUGIN
</div>

</body>
</html>