Центр DIV, содержащий относительный элемент с использованием CSS

Question

Я борюсь с этим поведением. Я добавляю два DIV (sub1 и sub2) внутри контейнера DIV. Sub2 устанавливается относительное положение для перекрытия нижнего правого угла Sub1. При этом ширина контейнера DIV не является хорошей, она такая же, как перед изменением относительного положения Sub1. Сначала это было не проблематично, но затем клиент решил сосредоточить все это, тем самым нуждаясь в реальной ширине контейнера.

Можно ли это сделать с помощью CSS? Даже в JavaScript я получил ту же ширину (erronus one).

Вот простой пример задачи:

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
<div id="sub1"> 
 
</div> 
 
<div id="sub2"> 
 
</div> 
 
</div>

Answer 1

Если вы хотите, чтобы ваш контейнер DIV имел ширину двух блоков, вы не должны использовать относительное позиционирование. Использовать маржу вместо

#sub2 { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    margin-left: 80px; 
    margin-top: -20px; 
} 

Answer 2

Я немного непонятно, что поведение, которое вы хотите увидеть. Полагаю, вы хотите, чтобы красные и синие квадраты перекрывались, но вы также хотите, чтобы они были сосредоточены на странице? В этом случае решение легко, просто добавьте еще один слой DIV между «основным» и меньшим полями.

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
    <div id="center"> 
 
     <div id="sub1"> 
 
     </div> 
 
     <div id="sub2"> 
 
     </div> 
 
    </div> 
 
</div>

В общем случае для каждого «преобразования», который вы хотите элемент, чтобы сделать, вы должны добавить еще один DIV обертку вокруг него для этой трансформации. Таким образом, каждое преобразование независимо друг от друга, и их легче управлять.

Answer 3

Это популярный способ центрирования любого элемента (без добавления дополнительных разделов): используйте свойство transform в сочетании с left (или top для вертикального центрирования).

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    width: 200px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
    <div id="sub1"></div> 
 
    <div id="sub2"></div> 
 
</div>

Я также удалил display: inline-block; из #main{}, потому что не было ничего в этой демонстрации делать.