[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 661
  • Last Modified:

Z-Index Deprecated in xhtml?

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
eh1160
Asked:
eh1160
  • 2
1 Solution
 
Julian MatzCommented:
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
 
eh1160Author Commented:
Awesome...thanks for the quick solution!  (And duh...I wish I figured that out on my own!)
0
 
Julian MatzCommented:
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now