Есть ли способ очистить абсолютно позиционированные элементы с помощью CSS? Я создаю страницу, где мне нужно, чтобы каждая часть сайта (элемент раздела) была абсолютно позиционирована, и я хочу применить нижний колонтитул с содержимым ниже этих элементов.
Пробовал относительно позиционировать верхний и нижний колонтитулы, чтобы увидеть, будет учитываться общая высота, но нижний колонтитул все еще попадает в ловушку под элементами раздела. Любые идеи?
<header style="position: relative;"></header>
<div id="content" style="position: relative;">
<section id="a" style="position: absolute;"></section>
<section id="b" style="position: absolute;"></section>
<section id="c" style="position: absolute;"></section>
<section id="d" style="position: absolute;"></section>
<section id="e" style="position: absolute;"></section>
</div>
<footer style="position: relative;"></footer>
Абсолютно позиционированные элементы больше не являются частью макета - родительские элементы не имеют представления о том, насколько велики абсолютно позиционированные дочерние элементы. Вам необходимо установить высоту "содержимого", чтобы убедиться, что она не перекрывает нижний колонтитул.
Не используйте абсолютно позиционированные элементы для макетов, поскольку эти элементы удаляются из обычного потока и больше не затрагивают элементы вокруг них. И на них не влияют другие элементы.
Используйте абсолютное позиционирование для перемещения элементов внутри контейнера, когда позволяют условия.
Для плавающих элементов я предлагаю вам использовать определенную технологию очистки, называемую clearfix. Я использую его религиозно.
Имел такой же вопрос, сделал все абсолютное позиционирование, но пусть первый будет относительным, так как для гибкого макета, где высота изменяется, это помогло отслеживать изменения высоты элементов, обратите внимание, что в этом случае все элементы имеют одинаковую высоту
.gallery3D-item {
position: absolute;
top: 0;
left: 0;
}
.gallery3D-item:first-of-type {
position: relative;
display: inline-block;
}Я нашел простое решение для этого, оно может не охватывать все возможные проблемы, но, по крайней мере, это решило мою проблему.
HTML:
<p>Content before</p>
<div class="offset-wrapper">
<div class="regular">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
<div class="special">
<img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
</div>
</div>
<p>Content after</p>
CSS:
.offset-wrapper {
background: green;
position: relative;
width: 100px;
}
.offset-wrapper .regular {
visibility: hidden;
}
.offset-wrapper .special {
bottom: -15px;
left: -15px;
position: absolute;
}
Чтобы решить эту проблему, я использовал ключевое слово "начальный". Это восстанавливает любое свойство в значение по умолчанию.
#yourElement {
position:initial;
}