Установить абсолютную позицию и маржу

Question

Я хотел бы установить для элемента position значение absolute и иметь значение margin-bottom, но кажется, что margin-bottom не имеет эффекта.

HTML:

<div id='container'></div>

CSS:

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}

Answer 1

Я знаю, что это не очень своевременный ответ, но есть способ решить эту проблему.Вы можете добавить элемент «spacer» в элемент, расположенный absolute ly с отрицательным нижним полем и высотой, равной размеру отрицательного нижнего поля.1006 * CSS:

// same container code, but you should remove the margin-bottom as it has no effect

// spacer code, made it a class as you may need to use it often
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}

Answer 2

Опираясь на Ответ Джоуи , для более чистой разметки используйте CSS :after -селектор, чтобы добавить проставку для желаемого нижнего поля.

CSS

#container:after {
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 1px;
}

Answer 3

Что вы ожидаете от margin-bottom, когда ваш элемент позиционируется по его верхней стороне?

margin-bottom будет делать что-либо только с элементом absolute ly-позиционированным, если элемент не имеет top собственность.

Answer 4

Вам необходимо установить position на relative, чтобы установить его margin.

margin-bottom, margin-leftи margin-right будет НЕ работать, когда элемент находится в position: absolute.

Пример: HTML:

<img src="whatever.png"/>

CSS:

img {
   position: relative;
   margin: 0 auto;
}

Answer 5

Поскольку я заранее не знаю высоту, я вместо этого добавил невидимый элемент в конец абсолютно позиционированного объекта с высотой, которой я хотел бы задать поле.

В моем случае абсолютно позиционируемый элемент - это таблица, поэтому я добавил дополнительную пустую строку высотой 100 пикселей. Тогда граница, которая должна была быть внизу таблицы, вместо этого взяла «tr: nth-last-of-type (2) td».

Надеюсь, это поможет.

Answer 6

Я нашел решение !!!

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

Это сработало для меня, когда я попытался использовать абсолютное положение, переместить элемент со свойством top и попытаться добавить поле.

Answer 7

В некоторых случаях изменение position: absolute на position: relative также решает эту проблему.Если вы можете изменить свое положение, это будет самый простой способ решить проблему.В противном случае проставка Джои делает свое дело.