Solved

Z-Index Deprecated in xhtml?

Posted on 2009-04-03
3
654 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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 …

688 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