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

Question

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

Как сделать абсолютный позиционированный элемент честь заполнения его родителя? Я хочу, чтобы внутренний div растягивался по ширине своего родителя и располагался в нижней части этого родителя, в основном нижнего колонтитула. Но ребенок должен уважать дополнение родителя, и он этого не делает. Ребенок прижимается прямо к краю родителя.

поэтому я хочу этого:

enter image description here

но я получаю это:

enter image description here

<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, но я бы предпочел не добавлять это.

686 7

css padding css-position

7 ответов:

Comments

Ничего не найдено.

Kevin Christopher Henry · Accepted Answer · 2017-01-12 07:32:07

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

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

Winter · Accepted Answer · 2015-09-10 16:43:34

одна вещь, которую вы могли бы попробовать, это использовать следующий css:
.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}
это позволяет дочернему элементу наследовать заполнение от родителя, тогда дочерний элемент может быть расположен в соответствии с родительским widht и заполнением.

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

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

NewSpender · Accepted Answer · 2013-11-09 20:11:24

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

Touch · Accepted Answer · 2013-06-14 22:15:29

вот мой лучший шанс на это. Я добавил еще один Div и сделал его красным и изменил высоту вашего родителя на 200px, чтобы проверить его. Идея заключается в том, что ребенок теперь становится внуком, а родитель становится бабушкой и дедушкой. Поэтому родитель уважает своего родителя. Надеюсь, вы поняли мою идею.
<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>
Edit:

Я думаю, что вы пытаетесь сделать невозможно. Абсолютное положение означает, что вы собираетесь дать ему координаты, которые он должен соблюдать. Что если родитель имеет отступ в 5 пикселей. И вы абсолютно позиционируете ребенка на верхняя: -5 пикселей; слева: -5 пикселей. Как это, предполагают, чтобы чтить родителей и в то же время??

мое решение

Если вы хотите, чтобы он почитал родителя, не совсем позиционируйте его тогда.

Niloct · Accepted Answer · 2014-02-27 21:41:05

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

bhavya_w · Accepted Answer · 2016-12-05 12:43:28

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

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

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

в вашем случае:
.css-sux{
  padding: 0px 10px 10px 10px;
}

asankasri · Accepted Answer · 2016-11-10 09:46:33

можно было бы легко сделать, используя дополнительный уровень 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>
Demo:https://jsfiddle.net/soxv3vr0/