Я хотел бы установить элемент 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
}
Что вы ожидаете от margin-bottom, когда ваш элемент позиционируется его верхней стороной?
margin-bottom будет делать что-либо только в элементе absolute ly-position, если элемент не имеет свойства top.
Я знаю, что это не очень своевременный ответ, но есть способ решить эту проблему. Вы можете добавить элемент "spacer" внутри элемента, расположенного absolute ly с отрицательным нижним полем и высотой, равной размеру отрицательного нижнего поля.
HTML:
<div id="container">
<div class="spacer"></div>
</div>
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 parent element has a different background from #container itself */
}
Основываясь на Joey answer, для более чистой разметки используйте CSS :after -selector, чтобы добавить разделитель для желаемого нижнего поля.
#container:after {
position: absolute;
content: "";
bottom: -40px;
height: 40px;
width: 1px;
}
Поля на абсолютном позиционированном элементе работают как обычно, по сравнению с относительным или статическим позиционированным элементом. За исключением того факта, что они установлены на элемент с абсолютным позиционированием. И все мы знаем, что элемент с абсолютным расположением не влияет на другие элементы вне его окна.
Итак... это противоречит тому, что можно здесь прочитать. Лично я озадачен некоторыми рассуждениями в довольно оцененных (а иногда и просто неправильных) ответах.
Это прямо в спецификации (W3C)
Absolute
Позиция коробок (и, возможно, размер) задается с помощью свойств верхнего, правого, нижнего и левого. Эти свойства определяют смещения в отношении блоков, содержащих блок. Абсолютно позиционированный коробки выводятся из нормального потока. Это означает, что они не влияют на макете более поздних братьев и сестер. Хотя абсолютно позиционируемые коробки могут иметь поля, эти поля не сжимаются с любыми другими полями.
Итак, вы можете использовать поля на абсолютных позиционированных элементах, но помните, что эти поля не влияют на другие элементы (включая элемент body).
Таким образом, причина, по которой не имеет эффекта margin, не влияет на элемент body (или documentElement). Вы не можете "увеличить" элемент тела с полями на абсолютном позиционированном div, например.
Для заинтересованных, может быть интересно знать, что вы можете использовать как позиционирование CSS, так и CSS-марку. Таким образом, позиционирование слева: 50% и margin-left: -400px на коробке шириной 800px помещают коробку в середину экрана.
FWIW: лучший ответ был от Nik, создайте разделитель, используя псевдоэлемент :after. Зачем? Поскольку псевдоэлементы рассматриваются как другой элемент. Код:
#absoluteElem:after {
position:absolute;
content:"";
bottom:-20px;
height:20px;
width:1px;
}
Вам нужно установить position в relative, чтобы установить его margin.
margin-bottom, margin-left и margin-right будут работать NOT, когда элемент в position: absolute.
Пример: HTML:
<img src="whatever.png"/>
CSS
img {
position: relative;
margin: 0 auto;
}
Для некоторых случаев использования, изменение position: absolute до position: relative также решает эту проблему. Если вы можете изменить свое позиционирование, это будет самый простой способ решить проблему. В противном случае спейсер Джои делает трюк.
Я нашел решение!!!
установите минимальную высоту контейнера, положение должно быть изменено с абсолютного на наследование, установите верхнее свойство в значение по вашему выбору, и дисплей должен быть встроенным блоком.
Это сработало для меня, когда я попытался использовать абсолютную позицию, перемещая элемент с верхним свойством и пытаюсь добавить маржу.
min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;