[skymonkier]

This is probably a newbie question and has been asked a bajillion (if that is a real number) times. I just need my header to overlap my subheader, even if the subheader is positioned relatively. I'm not sure if what I'm asking here makes any sense, so I just need to know how to use z-index or some other means of overlapping one div with another.

This post has been edited by skymonkier: 08 December 2012 - 09:43 AM

[Dormilich]

z-index only determines, which of the overlapping elements is on top (fully visible). you could try negative margins, though.

[skymonkier]

Dormilich, on 08 December 2012 - 09:31 AM, said:

z-index only determines, which of the overlapping elements is on top (fully visible). you could try negative margins, though.

Never heard of using negative margins, could you explain, please?

[Dormilich]

negative margin = margin with a negative value (e.g. "-3em").

[skymonkier]

Well, go figure, but how does it help at all?

When I use the negative margins + z-index, it does move it underneath the content of the other div, but it still overlaps the div itself.

This post has been edited by skymonkier: 08 December 2012 - 10:03 AM

[Anthonidas]

Perhaps it is easyer to understand if you explain what you want by showing us what you already have...

[skymonkier]

If it isn't already obvious, I simply want the black in the image I previously posted to be underneath the white header. but currently, the black part still is on top of the background of the white div.

[Anthonidas]

this is clear, but show us your actual code. How did you order your divs and what css-properties do they have?

[skymonkier]

Ah, sorry. Here's the two snippets.

The header:

/* --- Header --- */
header { 
	height: 92px; 
	width: 920px; 
	z-index: 17;
	margin: 0px auto;
	border-top: 2px solid #0088e3; 
	padding: 0px 12px;
	background: -moz-linear-gradient(top, rgb(255, 255, 255) 0.6%, rgb(239, 239, 239) 99.4%) #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.006, rgb(255, 255, 255)), color-stop(0.994, rgb(239, 239, 239))) #fff;
}

header img { position: relative; top: 8px; }
/* -------------- */

The subheader:

/* - Subheader - */
#subheader { 
	background: url('images/Banners/Banner_BG.png') no-repeat left top; 
	height: 540px; 
	margin-top: -50px; 
	z-index: 1; 
	min-width: 920px; 
	width: 100%; 
}
/* ------------- */

[Anthonidas]

and html?

[Lemur]

Both elements need to have a relative position. Relative positioning takes an element out of inline. Try adding a position:relative to the other element.

[mgaines2]

Why not just turn the position to absolute?