Mam 2 DIVy, które chcę wyśrodkować i nałożyć. Mniejszy ma leżeć na większym.
Działa świetnie na pełnym ekranie, ale jeśli zmniejszy rozmiar przeglądarki, górna / mniejsza porusza się w lewo.
<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>Odpowiedzi:
1 dla odpowiedzi № 1Lubię korzystać left: 50%; w połączeniu z transform: translateX(-50%); podczas próby wyśrodkowania i nakładania się treści.
Zawartość jest przesunięta o 50% w lewo, a następnie -50% jej szerokości w lewo .. lub (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>