Как сделать так, чтобы элемент с абсолютным позиционированием соблюдал заполнение его родителя? Я хочу, чтобы внутренний div растягивался по ширине своего родителя и располагался внизу этого родителя, в основном нижний колонтитул. Но ребенок должен соблюдать отступление родителя, а он этого не делает. Ребенок прижимается прямо к краю родителя.
Итак, я хочу это:
но я получаю это:
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
</div>
</body>
</html>Я могу сделать это с полем вокруг внутреннего div, но я бы предпочел не добавлять это.
css
padding
css-position
D512
источник
источник
style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?left:иright:абсолютного позиционирования), ваша проблема будет решена. Я добавляю это ч / б, это ответ, который, вероятно, будут искать другие с такой же проблемой.Ответы:
Сначала посмотрим, почему это происходит.
Причина в том, что, как ни удивительно, когда у блока есть
position: absoluteсодержащий его блок, это блок заполнения родительского элемента (то есть, блок вокруг его заполнения). Это удивительно, потому что обычно (то есть при использовании статического или относительного позиционирования) содержащее поле является родительским блоком содержимого .Вот соответствующая часть спецификации CSS :
Самый простой подход - как предлагается в ответе Винтера - использовать
padding: inheritабсолютно позиционированныйdiv. Тем не менее, это работает только в том случае, если вы не хотите, чтобы у абсолютно позиционированногоdivобъекта был какой-либо дополнительный отступ. Я думаю, что наиболее универсальные решения (в которых оба элемента могут иметь свои собственные независимые отступы):Добавьте дополнительный относительно позиционированный
div(без отступов) вокруг абсолютно позиционированныйdiv. Это новоеdivбудет уважать отступы его родителя, и тогда абсолютно позиционированноеdivзаполнит его.Недостатком, конечно, является то, что вы возитесь с HTML просто для презентационных целей.
Повторите отступ (или добавьте к нему) для абсолютно позиционированного элемента.
Недостатком здесь является то, что вы должны повторять значения в вашем CSS, что хрупко, если вы пишете CSS напрямую. Однако, если вы используете инструмент предварительной обработки, например,
SASSилиLESSвы можете избежать этой проблемы с помощью переменной. Это метод, который я лично использую.источник
position: absolute? Удивительно, что вмещающий блок является полем заполнения, но, должно быть, для этого была причина, точно так же, как я уверен, что есть причина, по которой (безbox-sizing)width&heightне включают отступ или границу.box-sizingсвойства, на родителя или ребенка. Это связано с тем, что это влияет на размеры , как на ширину / высоту, но не на ячейку, в которой они содержатся, хотя я допускаю, что это будет иметь больше смысла, если это повлияет на оба.padding: inheritработает хорошо, если абсолютно позиционированныйdivне нуждается ни в каком собственном заполнении, и я добавил упоминание об этой технике. Это менее гибко, потому что вы не можете добавить дополнительный отступ к абсолютно позиционированномуdiv(то есть вы не можете сказатьpadding: inherit + 5px). Вот почему я предпочитаю методы, которые я упоминаю здесь.position:absoluteдочернего элемента действительно работает, если вы просто ищете, чтобы дочерний элемент соблюдал заполнение родительского элемента. Тем не менее, если вы хотите добавить дополнительные отступы для дочернего элемента, вам придется следить за соотношением заполнений в вашем коде. Нет чистого способа сделать это только с помощью CSS.Одна вещь, которую вы можете попробовать использовать следующий CSS:
Это позволяет дочернему элементу наследовать заполнение от родителя, тогда дочерний элемент может быть расположен так, чтобы соответствовать родительскому видению и заполнению.
Также я использую
box-sizing: border-box;для задействованных элементов.Я не проверял это во всех браузерах, но, похоже, он работает в Chrome, Firefox и IE10.
источник
Возможно, это не самое элегантное решение (семантически), но в некоторых случаях оно будет работать без каких-либо недостатков: вместо заполнения используйте прозрачную границу для родительского элемента. Абсолютно позиционированные дочерние элементы будут соблюдать границу, и она будет отображаться точно так же (за исключением того, что вы используете границу родительского элемента для стилизации).
источник
Используйте поле вместо отступа в родительском div: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
источник
Вот мой лучший выстрел в это. Я добавил еще один Div, сделал его красным и изменил рост вашего родителя на 200px, просто чтобы проверить это. Идея в том, что ребенок теперь становится внуком, а родитель становится прародителем. Таким образом, родитель уважает своего родителя. Надеюсь, вы поняли мою идею.
Редактировать:
Я думаю, что вы пытаетесь сделать, не может быть сделано. Абсолютная позиция означает, что вы собираетесь дать ему координаты, которые он должен соблюдать. Что делать, если родитель имеет отступ 5px. И вы абсолютно позиционируете ребенка сверху: -5px; слева: -5px . Как можно почитать родителя и тебя одновременно?
Мое решение
Если вы хотите, чтобы это чтило родителя, тогда не устанавливайте его абсолютно.
источник
1.) вы не можете использовать большую рамку для родителя - в случае, если вы хотите иметь определенную рамку
2.) вы не можете добавить маржу - в случае, если ваш родительский элемент является частью какого-либо другого контейнера, и вы хотите, чтобы ваш родительский элемент взял полную ширина этого прародителя.
Единственное решение, которое должно быть применимо, - это обернуть ваших детей в другой контейнер, чтобы ваш родитель стал прародителем, а затем применить обивка для нового детского обертки / родителя. Или вы можете напрямую применить прокладку для детей.
В твоем случае:
источник
Это легко сделать, используя дополнительный уровень Div.
Демо: https://jsfiddle.net/soxv3vr0/
источник
добавить отступы: наследовать в вашей абсолютной позиции
источник