Eu tenho 2 DIVs, que desejo centralizar e sobrepor. O menor deve ser colocado em cima do maior.
Funciona muito bem em tela inteira, mas se eu diminuir o tamanho do navegador, o superior / menor se move para a esquerda.
<div style="position: relative; top: 160px; border: thin solid gray; border-radius: 10px; width: 300px; height: 64px; margin-left: auto; margin-right: auto; z-index: 1; background: url(...); background-repeat:no-repeat; background-position:top; background-color: #4b2f84"> </div>
<div style="position: absolute; top: 200px; left: 15%; width: 70%; background: white; border: thin solid gray; border-radius: 10px; height: 500px; padding: 50px 30px; margin: auto">something
</div>Respostas:
1 para resposta № 1Eu gosto de usar left: 50%; combinado com transform: translateX(-50%); ao tentar centralizar e sobrepor o conteúdo.
O conteúdo é deslocado 50% para a esquerda e -50% de sua largura para a esquerda .. ou (this.left == parent.x + parent.width* 0.5 - this.width*0.5)
#div1 {
position: relative;
top: 160px;
border: thin solid gray;
border-radius: 10px;
width: 300px;
height: 64px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: url(...);
background-repeat: no-repeat;
background-position: top;
background-color: #4b2f84
}
#div2 {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: white;
border: thin solid gray;
border-radius: 10px;
height: 500px;
padding: 50px 30px;
margin: auto
}<div id="div1"> </div>
<div id="div2">something</div>