Абсолютне позиціонування ігнорування прокладки батьків

Як зробити так, щоб абсолютний розміщений елемент шанував прокладку його батьків? Я хочу, щоб внутрішній дів розтягнувся на ширину його батьківського і був розміщений в нижній частині цього з батьків, в основному футера. Але дитина має шанувати батьківські прокладки, і це не робить. Дитину притискають праворуч до краю батька.

Тому я хочу цього:

але я отримую це:

<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>

Я можу зробити це з відривом навколо внутрішнього поділу, але я вважаю за краще не додати цього.

Спочатку давайте розберемося, чому це відбувається.

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

Ось відповідна частина специфікації CSS :

У випадку, якщо пращур є вбудованим елементом, що містить блок - це обмежувальне поле навколо набивних коробок першого та останнього вкладених коробок, створених для цього елемента .... В іншому випадку блок, що містить, формується краєм оббивки предка.

Найпростіший підхід - як пропонується у відповіді Зімової - полягає у використанні padding: inheritна абсолютно встановленому місці div. Це працює лише, якщо ви не хочете, щоб абсолютно позиціоновані divбули власні додаткові накладки. Я думаю, що найбільш загальні рішення (в тому, що обидва елементи можуть мати власну незалежну підкладку):

1. Додайте додатковий відносно розташований div(без прокладки) навколо абсолютно розташованого div. Це нове divбуде поважати прокладку свого батьківського складу, і абсолютно розміщена divтоді його заповнить.

   Мінус, звичайно, полягає в тому, що ти возишся з HTML просто для презентаційних цілей.

2. Повторіть прокладку (або додайте до неї) на абсолютно розташованому елементі.

   Мінус тут полягає в тому, що вам потрібно повторити значення у своєму CSS, що є крихким, якщо ви пишете CSS безпосередньо. Однак якщо ви використовуєте інструмент попередньої обробки, як, SASSабо LESSви можете уникнути цієї проблеми, використовуючи змінну. Це метод, який я особисто використовую.

Одне, що ви можете спробувати, це використовувати наступний css:

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

Це дозволяє дочірньому елементу успадкувати прокладку від батьків, тоді дитина може бути розміщена так, щоб вона відповідала ширині батьків і прокладці.

Також я використовую box-sizing: border-box;для залучених елементів.

Я не тестував це у всіх браузерах, але, здається, працює в Chrome, Firefox та IE10.

Що ж, це може бути не найелегантнішим рішенням (семантично), але в деяких випадках воно буде працювати без будь-яких недоліків. Абсолютно розташовані дочірні елементи будуть шанувати межу, і вона буде надана точно так само (за винятком випадків, коли ви використовуєте межу батьківського елемента для стилізації).

Використовуйте поле замість прокладки у батьківському ділі: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

Ось мій найкращий знімок у цьому. Я додав ще один Div і зробив його червоним і змінив зріст вашого батька на 200 пікс, просто щоб перевірити його. Ідея полягає в тому, що дитина зараз стає онуком, а батько стає бабусею та дідусем. Так батько поважає свого батька. Сподіваюся, ви зрозумієте мою ідею.

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

Редагувати:

Я думаю, що те, що ти намагаєшся зробити, неможливо зробити. Абсолютна позиція означає, що ви збираєтесь надати їй координати, які він повинен шанувати. Що робити, якщо у батьків є прокладка 5 пікселів. І ви абсолютно позиціонуєте дитину вгорі: -5px; зліва: -5px . Як це припустити одночасно шанувати батьків і вас ??

Моє рішення

Якщо ви хочете, щоб він шанував батьків, тоді не позиціонуйте його абсолютно.

1.) Ви не можете використовувати велику межу для батьків - якщо ви хочете мати конкретну межу

2.) Ви не можете додати маржу - якщо ваш батько є частиною іншого контейнера, і ви хочете, щоб ваш батько взяв повну ширина цього батька.

Єдине рішення, яке повинно бути застосоване, - це загортати своїх дітей в інший контейнер, щоб ваш батько став бабусею та дідусем, а потім застосувати накладки до нового дитячого обгортка / батька. Або ви можете безпосередньо застосувати накладки для дітей.

У вашому випадку:

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

Можна було легко зробити, використовуючи додатковий рівень 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/

додайте прокладки: успадковуйте в абсолютній позиції

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>