Solved

Z-Index Deprecated in xhtml?

Posted on 2009-04-03
3
650 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Need help with this homework problem. 5 54
How to escape unsafe HTML tags 4 36
Any Way to rotate banner ads from Commission Junction? 2 36
Use "if not" in a condition 2 18
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

735 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