z-index style not working

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

The appearance of the page should be for the main image, lpmap.jpg, to
be on the bottom, (z-index: 1), with pictures, (image0.jpg -
image9.jpg), and accompaning notes to appear on top, (z-index: 2),
minimized to 20px x 20px width & height, using the box model. These 10,
(point0 to point9), are positioned on the map with the position style.
These small images should then enlarge when the mouse hovers over them,
(z-index: 3).

The problem I am having is that the picture with z-index of 1,
(lpmap.jpg), does not appear underneath the elements (.notes class).
The .notes are not visible, (z-index: 2). To bebug, I temporarily
removed lpmap.jpg, and then I could see the 20px x 20px images that
should appear on top. Also, when I hovered the mouse over them, they
enlarged as directed in the css style declaration,

..notes a:hover {width: 150; height: 170; overflow: visible; z-index:

I am aware that the elements subject to a z-index style must be
positioned using the absolute position, (I think my code is OK here?).
They also share a common parent, <div id="online_map">.

Can the browser determine that they share a common parent or must the
code explicitly state that?

My code: #lpmap {position: absolute; left: 0; top: 0; width: 600;
height: 294; z-index: 1;}
Should be(?): #online_map #lpmap {position: absolute; left: 0; top: 0;
width: 600; height: 294; z-index: 1;}

TIA for any help. I've really spent alot of time trying to figure this
one out, Googled for similar problems, but no one seemed to have the
problem I do.


Filename:         longs.htm
Supporting files: image0.jpg - image9.jpg, lpmap.jpg
<title>Longs Peak Online Map</title>
<style type="text/css" media="screen, tv, tty">
body {font-family: sans-serif;}
a {text-decoration: none;}
img {border: 0;}
#summary {position: absolute; top: 350; width: 600;}
#online_map {position: absolute; left: 5; top: 5;}
#lpmap {position: absolute; left: 0; top: 0; width: 600; height:
294; z-index: 1;}
#instruction {position: relative; top: 300; width: 600; font-size:
..notes p {margin: 5; font-size: 8pt;}
..notes span {color: yellow}
..notes a {background-color: blue; color: white; width: 20; height:
z-index: 2; overflow: hidden;}
..notes a:hover {width: 150; height: 170; overflow: visible;
z-index: 3;}
#point0 {position: absolute; left:560; top: 60}
#point1 {position: absolute; left:277; top: 90}
#point2 {position: absolute; left:175; top: 0}
#point3 {position: absolute; left:110; top: 115}
#point4 {position: absolute; left:55; top: 165}
#point5 {position: absolute; left:5; top: 180}
#point6 {position: absolute; left:15; top: 222}
#point7 {position: absolute; left:50; top: 245}
#point8 {position: absolute; left:100; top: 245}
#point9 {position: absolute; left:90; top: 220}

<div id="summary">
<h2>Longs Peak <span id="hideprint">Online</span> Trail Map</h2>
<p>At 14,255 feet, Longs Peak towers above all other summits in Rocky
Mountain National
Park. The summer is the only season in which the peak can be climbed by
a non-technical
route. Early mornings break calm, clouds build in the afternoon sky,
often exploding in
storms of brief, heavy rain, thunder and dangerous lightning. Begin
your hike early,
way before dawn, to be back below timberline before the weather turns
for the
<p>The Keyhole Route, Longs Peak's only non-technical hiking pathway,
is a 16 mile
round trip with an elevation gain of 4,850 feet. Though non-technical,
the Keyhole
Route is still challenging and is not recommended for those who are
afraid of heights
or exposed ledges. Hikers should be properly outfitted with clothing,
food and water.
Use caution when ascending or descending steep areas. Don't be afraid
to back down when bad
weather threatens.</p>

<div id="online_map">
<div id="lpmap"><img src="lpmap.jpg" alt="" /></div>
<div id="point0" class="notes">
<a href="#">
<img src="image0.jpg" alt="" /><br />
<span>3:30 a.m.</span> Start from the Longs Peak Ranger
nine miles south of Estes Park. Be sure to pack food, extra
water, sunblock,
and warm clothes, gloves, and caps.
<div id="point1" class="notes">
<a href="#">
<img src="image1.jpg" alt="" /><br />
<span>5:30 a.m.</span> Stop at Mills Moraine for a view of
<div id="point2" class="notes">
<a href="#">
<img src="image2.jpg" alt="" /><br />
<span>7:30 a.m.</span> Time for break at Granite Pass.
<div id="point3" class="notes">
<a href="#">
<img src="image3.jpg" alt="" /><br />
<span>8:30 a.m.</span> Climb through the Boulder Field on
way to the Keyhole.
<div id="point4" class="notes">
<a href="#">
<img src="image4.jpg" alt="" /><br />
<span>9:00 a.m.</span> Stop at the
Agnes Vaille shelter for a well-deserved breakfast.
<div id="point5" class="notes">
<a href="#">
<img src="image5.jpg" alt="" /><br />
<span>9:30 a.m.</span> It's time to go through
the Keyhole. Be prepared for heavy winds.
<div id="point6" class="notes">
<a href="#">
<img src="image6.jpg" alt="" /><br />
<span>10:00 a.m.</span> Follow the painted targets along
the Ledges.
<div id="point7" class="notes">
<a href="#">
<img src="image7.jpg" alt="" /><br />
<span>11:00 a.m.</span> Take special care when crossing the
<div id="point8" class="notes">
<a href="#">
<img src="image8.jpg" alt="" /><br />
<span>11:15 a.m.</span> You're almost there! Climb the
to reach the summit.
<div id="point9" class="notes">
<a href="#">
<img src="image9.jpg" alt="" /><br />
<span>11:45 a.m.</span> Congratulations, you've reached the
Time for lunch and a few photos.
<div id="instruction">Move your mouse pointer over the numbered
in the map to preview the hike.



Re: z-index style not working

Just caught 2 flaws.  The div element right before the <body> statement
should be right after it. The other is each element belonging to the
..notes class has a link, ( <a href="#"> ), enclosing a paragraph. This
is a problem because links shouldn't contain block elements. But making
these changes still doesn't appear to solve my problem with the display.

Re: z-index style not working

Previously in comp.infosystems.www.authoring.html,

> Just caught 2 flaws.

When you have fixed any other validation errors in your HTML and CSS,
post a URL and we may be able to help.

Mark Parnell

Re: z-index style not working

Hello Mark

Unfortunately there is no URL for this page - I am designing it on my
home computer. I realize that my posted code is not easy to read
because you lose the formatting of the text when you post to Google.

Did make the 2 changes above, but I still have the same problem.


If possible I could email the web page to you as an attachment if I had
an email address. Google isn't letting reply to author work at the

Site Timeline