Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to create a template like the below image.

The yellow block displays a transparent background colour over the top of the header block.

How can I do this using HTML & CSS?


enter image description here

share|improve this question

closed as off-topic by Zistoloen, Simon Hayter May 22 '14 at 11:12

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

Can you transfer this question to Stackoverflow please? – Steve May 23 '14 at 2:44

Absolute positioning inside relative objects in CSS will give you the ability to position an object outside of the normal flow and to overlap items.

The outer element (which holds the object) should be set to position: relative and the object inside it that you want to control freely should be set to position:absolute.

The position of the absolute object can then be controlled by the left, right, top and bottom properties.

Also, you may find z-index helpful as this specifies the order that objects are layered on top of each other.

Read more here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

share|improve this answer
I'd say make green relative, and give yellow top: -[heightBlue]px; left: -[widthYellow]px;. That way you dont have to think about all the absolute stuff and more important, you dont have to think about what will happen to the rest of your site – Martijn May 22 '14 at 11:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.