11 Replies - 950 Views - Last Post: 09 December 2012 - 02:06 PM

#1 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

How to Overlap Divs?

Posted 08 December 2012 - 09:29 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: How to Overlap Divs?

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,254
  • Joined: 08-June 10

Re: How to Overlap Divs?

Posted 08 December 2012 - 09:31 AM

z-index only determines, which of the overlapping elements is on top (fully visible). you could try negative margins, though.
Was This Post Helpful? 0
  • +
  • -

#3 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: How to Overlap Divs?

Posted 08 December 2012 - 09:43 AM

View PostDormilich, 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?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,254
  • Joined: 08-June 10

Re: How to Overlap Divs?

Posted 08 December 2012 - 09:47 AM

negative margin = margin with a negative value (e.g. "-3em").
Was This Post Helpful? 0
  • +
  • -

#5 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: How to Overlap Divs?

Posted 08 December 2012 - 09:56 AM

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.

Posted Image

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

Was This Post Helpful? 0
  • +
  • -

#6 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: How to Overlap Divs?

Posted 08 December 2012 - 04:11 PM

Perhaps it is easyer to understand if you explain what you want by showing us what you already have...
Was This Post Helpful? 0
  • +
  • -

#7 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: How to Overlap Divs?

Posted 08 December 2012 - 04:14 PM

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.
Was This Post Helpful? 0
  • +
  • -

#8 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: How to Overlap Divs?

Posted 08 December 2012 - 04:17 PM

this is clear, but show us your actual code. How did you order your divs and what css-properties do they have?
Was This Post Helpful? 0
  • +
  • -

#9 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: How to Overlap Divs?

Posted 08 December 2012 - 04:20 PM

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%; 
}
/* ------------- */


Was This Post Helpful? 0
  • +
  • -

#10 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: How to Overlap Divs?

Posted 09 December 2012 - 04:51 AM

and html?
Was This Post Helpful? 0
  • +
  • -

#11 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1372
  • View blog
  • Posts: 3,470
  • Joined: 28-November 09

Re: How to Overlap Divs?

Posted 09 December 2012 - 01:58 PM

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.
Was This Post Helpful? 0
  • +
  • -

#12 mgaines2  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 06-December 12

Re: How to Overlap Divs?

Posted 09 December 2012 - 02:06 PM

Why not just turn the position to absolute?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1