Четкие элементы с CSS?

Есть ли способ очистить абсолютно позиционированные элементы с помощью 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>

Ответ 1

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

Ответ 2

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

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

Для плавающих элементов я предлагаю вам использовать определенную технологию очистки, называемую clearfix. Я использую его религиозно.

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/

Ответ 3

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

.gallery3D-item {
    position: absolute;
    top: 0;
    left: 0;
}
.gallery3D-item:first-of-type {
    position: relative;
    display: inline-block;
}

Ответ 4

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

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

Ответ 5

Чтобы решить эту проблему, я использовал ключевое слово "начальный". Это восстанавливает любое свойство в значение по умолчанию.

#yourElement {
  position:initial;
}