Сохранение позиции элементов при изменении размера окна браузера / разрешения - PullRequest
Новая
       6

Сохранение позиции элементов при изменении размера окна браузера / разрешения

0 голосов
/ 05 февраля 2019

В основном я использую фон (тело), ​​и мне нужно, чтобы определенные элементы были расположены именно там, где я хочу, чтобы они были (я использовал top / left%) (обычно изображения и таблицы, но в этом примере я использовал простойэлементы div);после изменения размера окна браузера / изменения разрешения элементы, конечно, перемещаются в соответствии с новым размером, следовательно, они меняют положение.Я попытался использовать div родитель, чтобы решить это, но мне не удалось.HTML & CSS: 

body
{
background:black;
}
#content
{
    background:blue;
    top:1%;
    position:relative;
    height:900px;
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
}

.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:15%;
left:5%;
}

.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:80%;
}
<div id="content">

<div class="a">
Box1
</div>

<div class="b">
Box2
</div>

</div>

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019 
.a, .b{transform:translate(-50%,-50%);}

после добавления этого CSS вы должны изменить верхнее и левое значения в соответствии с местом, где вы хотите отобразить эти div / изображения.

0 голосов
/ 05 февраля 2019

Я изменил значения на px, а не%, это будет полезно, если значения не точные, просто для описания 

body
{
background:black;
}
#content
{
    background:blue;
    top:9px;
    position:relative;
    height:900px;
    max-width:1600px;
    margin-left:auto;
    margin-right:auto;
}

.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:150px;
left:50px;
}

.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50px;
left:80px;
}
<div id="content">

<div class="a">
Box1
</div>

<div class="b">
Box2
</div>

</div>
...