[css] chevauchement de calques

bonsoir,
je n'arrive pas a chevaucher  ces deux calques
je voudrais garder cette même mise en forme

<div style="z-index:2; margin-left: auto;margin-right: auto;width:550px; height:100%;background-color:yellow">
calque1 > deux bande jaune et une grosse bande rouge de 450px
</div>

<div style="z-index:1; margin-left: auto;margin-right: auto;width:450px; height:100%;background-color:red">
calque2
</div>

</body></html>