Layout tangle. Z-indexes?

mjjwatson · #1 (**permalink**) 02-25-10, 07:51 AM

Hi all. I've gotten myself a bit muddled in trying to implement a design. The idea is to have a normal box that fades to a shadow at the top. A nice cool effect, please see the attached file for a rough demo of what I mean.

I've quickly established I need to use a normal box to begin with, let's say:

Code:

.main-box {
	position:relative;
	background-color:#ccc;
	border:#B2B2B2 1px solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
}

And then use an absolute positioning of an internal div, which contains a background image of the gradient effect, for the top of the box:

Code:

#topshadow {
	position:absolute;
	background:url(images/box-head-bg.png) no-repeat top;
	height:150px;
	width:590px; /* 20px larger than the main-box, to fit in the shadow either side. */
	top:-41px; /* nudge accordingly, so that it lines up with the mainbox positioning */
	left:-11px;
	margin:0;
	padding:0;
	z-index:-100; /* give it a low z-index, so that it appears beneath */
}

Now that I have the topshadow in place, I can write normal content, images, paragraphs, etc, and they will appear at the top of the mainbox, regardless of the topshadow positioning as it is "absolute".

HOWEVER, the z-index is giving me problems. The topshadow div is appearing above my normal <p> tags, and I can't shift it. This is when laid out as so:

HTML Code:

<div class="mainbox">
<div id ="topshadow"></div>
<h1>Hello there</h1>
<p>Test text, test text, etc etc etc.</p>
</div>

If anyone has any ideas what I'm doing wrong, if there are some z-index quirks I'm not aware of, or if there is a better way of implementing this design that I haven't happened upon yet, I would be very happy. Hopefully I've explained myself well enough.

Thanks!

job0107 · #2 (**permalink**) 02-28-10, 01:38 AM

Well, your kinda on the right track.
Try something like this:

HTML Code:

<html>
<head>
<style>
.mainbox {
    position:relative;
    background-color:#ccc;
    border:#B2B2B2 1px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height:150px;
    width:590px;
}
#topshadow {
    position:absolute;
    background:#url(images/box-head-bg.png) no-repeat top;
    height:150px;
    width:590px;
}
.insideText {
   position:absolute;
   margin-top:50px;
   margin-left:50px;
   width:490;
}
</style>
</head>
<body>
<div class="mainbox">
<div id="topshadow"></div>
<div class="insideText">
<h1>Hello there</h1>
<p>Test text, test text, etc etc etc.</p>
<br />
<h1>Hello there</h1>
<p>Test text, test text, etc etc etc.</p>
<br />
<h1>Hello there</h1>
<p>Test text, test text, etc etc etc.</p>
<br />
<h1>Hello there</h1>
<p>Test text, test text, etc etc etc.</p>
</div>
</div>
</body>
</html>

mjjwatson · #3 (**permalink**) 03-05-10, 08:14 AM

excellent. Thanks Jerry. Cracked it

job0107 · #4 (**permalink**) 03-06-10, 10:14 PM

Hello mjjwatson,

Glad I could be of assistance.

Just remember, all HTML elements are relative to their parent element regardless if they are "absolute" or "relative" positioned.

As in your case, the DIV element with the class "mainbox" is the parent element.
And the DIV elements with the class "topshadow" and "insidetext" are the child elements.
When the child elements are positioned "absolute", the first child element will be drawn in the background and the second child element will be drawn in the foreground.
When there are more than two child elements, the first child element will be drawn first, the second child element will be drawn on top of the first child element and the third child element will be drawn on top of the second child element and so forth.
Then it's just a matter of setting the "left" and "top" attributes to position them exactly where you want them to appear, relative to the parent element.

Another little trick you can do is to change the "z-index" of the child elements when they are positioned "absolute"; to change the order in which they are drawn.
This can be done using Javascript to change their z-index's.

With a little or maybe a lot of practice, you can create all types of animation.

Cheers.