элементов - позиционирование картинки css




Абсолютное позиционирование, игнорирующее заполнение родительского элемента (5)

Как вы создаете элемент с абсолютным позиционированием для заполнения родительского элемента? Я хочу, чтобы внутренний 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, но я бы предпочел не добавлять это.


1.) вы не можете использовать большую границу для родителя - если вы хотите иметь определенную границу

2.) вы не можете добавить маржу - если ваш родитель является частью какого-либо другого контейнера, и вы хотите, чтобы ваш родитель взял всю ширину этого великого родителя.

Единственное решение, которое должно быть применимо, состоит в том, чтобы обернуть ваши дети в другой контейнер, чтобы ваш родитель стал прародителем и затем применил прокладку к новому Wrapper / Parent для детей. Или вы можете напрямую накладывать дополнения на детей.

В твоем случае:

.css-sux{
  padding: 0px 10px 10px 10px;
}

Во-первых, давайте посмотрим, почему это происходит.

Причина заключается в том, что, неожиданно, когда поле имеет position: absolute его содержащий поле является полем заполнения родителя (то есть поле вокруг его заполнения). Это удивительно, потому что обычно (то есть при использовании статического или относительного позиционирования) поле ввода является полем содержимого родителя.

Вот соответствующая часть спецификации CSS :

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

Самый простой подход, как было предложено в ответ Зимы, - использовать padding: inherit на абсолютно позиционированном div . Это работает, однако, если вы не хотите, чтобы абсолютно позиционированный div имел какие-либо дополнительные дополнения. Я думаю, что наиболее универсальные решения (в том, что оба элемента могут иметь собственное независимое дополнение):

  1. Добавьте дополнительный относительно расположенный div (без прокладки) вокруг абсолютно позиционированного div . Этот новый div будет уважать прописку своего родителя, и тогда абсолютно позиционированный div заполнит его.

    Недостатком, конечно же, является то, что вы возитесь с HTML просто для презентационных целей.

  2. Повторите прокладку (или добавьте ее) на абсолютно позиционированный элемент.

    Недостатком здесь является то, что вы должны повторять значения в своем CSS, что является хрупким, если вы пишете CSS напрямую. Однако, если вы используете инструмент предварительной обработки, такой как SASS или LESS вы можете избежать этой проблемы, используя переменную. Это метод, который я лично использую.



Может легко сделать, используя дополнительный уровень Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Демо: https://jsfiddle.net/soxv3vr0/


Одна вещь, которую вы можете попробовать, - использовать следующий css:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

Он позволяет дочернему элементу наследовать отступы от родителя, а затем дочерний элемент может быть расположен в соответствии с родительским widht и дополнением.

Кроме того, я использую box-sizing: border-box; для задействованных элементов.

Я не тестировал это во всех браузерах, но, похоже, работает в Chrome, Firefox и IE10.





css-position