Внутренний контейнер сдвигает положение внешнего контейнера из-за поля внутреннего контейнера
Раздел row имеет верхнее/нижнее поле 10px (margin: 10px 2px). Однако 10px сдвигает позицию основного контейнера. Я пытаюсь добиться того, чтобы строка имела верхнее/нижнее поле внутри main-container. Маржа как-то убегает и толкает main-container.
Вот мой код:
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}<div class = "main-container">
<div class = "row">
</div>
<div class = "row">
</div>
</div>Но если вы запустите этот код (ниже) без div row. Вы можете видеть, что положение main-container отличается. Это положение, в котором должен быть main-container.
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}<div class = "main-container">
</div>Как я могу это исправить?
Ответы 2
Вы должны изменить свой position в классе .main-container на position: absolute вместо position: relative.
Относительное позиционирование будет перемещать элемент в потоке страницы, тогда как абсолютное позиционирование, по сути, заблокирует его в любом положении, в котором вы его установили. Относительное позиционирование больше подходит для таких ситуаций, как ваш класс .row, где вы хотите, чтобы он зависел от позиционирования. класса .main-container. Абсолютное позиционирование следует использовать, когда вы не хотите, чтобы другие элементы (в частности, родительский элемент) определяли его позицию.
body {
padding: 0;
margin: 0;
}
.main-container {
position: absolute;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}<div class = "main-container">
<div class = "row">
</div>
<div class = "row">
</div>
</div>эта статья отлично объясняет, почему у вас возникают проблемы, когда и у родителя, и у ребенка есть position: relative. Если вы полностью уберете position родителя, вы даже не заметите разницы. Почему? Потому что не к чему его позиционировать родственник. Если вы удалите его из класса .row, вы получите те же результаты. Относительное позиционирование ищет элемент с позиционированием Кроме какstatic. В этом случае его нет, поэтому он ничего не делает, поскольку все родители (тело, html и т. д.) по умолчанию имеют position: static.
body {
padding: 0;
margin: 0;
}
.main-container {
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}<div class = "main-container">
<div class = "row">
</div>
<div class = "row">
</div>
</div>Я добавил объяснение для вас. position: relative в вашем .main-container классе ничего не делает. Если вы удалите его полностью, вы заметите, что ничего не изменилось. Дело не в том, что margin «убегает» от main-container. Это просто неправильное использование position: relative, не приводящее к изменению позиционирования.
@Ross проверьте дубликат, все дело в схлопывании полей, нет необходимости менять положение. Изменение позиции в данном случае является взломать, потому что маржа не схлопывается с position:absolute.
Не обязательно «хак», а скорее одно из многих возможных решений проблемы. Все возможные решения для устранения проблемы можно найти здесь.
<div class = "main-container">
<div class = "row">
</div>
<div class = "row">
</div>
</div>
body {
padding: 10px;
margin: 0;
}
.main-container {
position: relative;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
margin: 10px 0;
width: 175px;
height: 15px;
background-color: green;
}
Проверьте это в https://codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0
Знаете, почему мой код не сработал? Я обычно использую этот метод все время для позиционирования своих внутренних элементов div, но по какой-то причине сегодня он сломался?
Использование position: absolute; и position: relative; проблематично. Вот почему я избегаю использования позиций в css. Использование flexbox с сеткой намного проще и избавляет от головной боли.
Есть ли способ заставить это работать, используя position: relative;? Потому что в моем реальном коде он портится, когда я использую сетку. Я использовал относительное позиционирование. Так что все мое как бы настроено в относительном положении
Проверьте этот новый код codepen для вашего ответа. Я надеюсь, что это работает. codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0
Я не высмеиваю position: absolute; и position: relative;. Это действительно отличный и очень полезный инструмент при разработке веб-страницы. Раньше я использовал эти позиции до того, как открыл для себя flex-box и grid layout. После того, как я привык к этим макетам, я нахожу позиционирование элемента слишком сложным. Flex-box и Grid layout действительно упростили позиционирование элемента. Пожалуйста, не поймите меня неправильно. Я не говорю, что это плохо для кода. @Ник
Но почему
rowменяет положениеmain-container? Маржа дляrowравна внутриmain-container? Как это избежатьmain-container? Полеrowдолжно смещать позицию строки внутри за пределыmain-container