Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

Thanks.

enter image description here

share|improve this question

closed as off-topic by Zistoloen, bybe May 22 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 at 2:44
add comment

1 Answer 1

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
1  
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 at 11:06
add comment

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