Solved

Z-Index Deprecated in xhtml?

Posted on 2009-04-03
3
644 Views
Last Modified: 2013-11-19
Why doesn't the z-index seem to work in the following example?  The text "Layer 2" text doesn't show up on top of the "Layer 1" text unless I remove the DOCTYPE declaration at the top of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang= "en">

<head>

</head>
 

<body>

<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:40">LAYER 2</div>

</body>
 

</html>

Open in new window

0
Comment
Question by:eh1160
  • 2
3 Comments
 
LVL 21

Accepted Solution

by:
Julian Matz earned 50 total points
ID: 24066033
Hi! No, it's not deprecated. You just had the properties for "top" and "left" wrong by ommiting the unit (e.g. px). The following should work:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang= "en">

<head>

</head>

 

<body>

<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>

<div style="position:relative; top:-50px; left:5px; color:red; font-size:80px; z-index:40">LAYER 2</div>

</body>

 

</html>

Open in new window

0
 

Author Closing Comment

by:eh1160
ID: 31566506
Awesome...thanks for the quick solution!  (And duh...I wish I figured that out on my own!)
0
 
LVL 21

Expert Comment

by:Julian Matz
ID: 24067865
No problem. Glad I could help. Sometimes it takes an extra pair of eyes to spot something as simple as this - especially if you've been looking at the same code for a long time :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now