Css "фиксированные" позиции дочерних элементов относительно родительского элемента не для окна просмотра, почему?

Я разрабатываю тему wordpress с изотопной сеткой и где наведите указатель на сообщение, чтобы отобразить его заголовок с фиксированной позицией в нижней части браузера. У меня есть эта упрощенная структура:

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

Через jQuery наведите курсор на <article>, чтобы отобразить дочерний элемент h2.subtitled. <article> позиционируется относительно, но получает абсолютное положение изотопом script. h2.subtitled позиционируется с помощью:

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

По какой-то причине элементы h2.subtitle имеют фиксированное расположение, связанное с родительским элементом <article>, поэтому нижняя часть каждого <article>. Если я устанавливаю <h2> вне <article>, он позиционируется фиксированным, связанным с браузером, но он должен быть внутри элемента <article>, поскольку бесконечная прокрутка добавляет новые элементы <article>, и они должны также содержат заголовки <h2>.

Кто-нибудь знает, как сделать эту позицию фиксированной и связанной с окном браузера?

Спасибо!

Ответы

Ответ 1

FWIW, когда я столкнулся с этим, проблема оказалась родительским div с -webkit-transform: translate3d(0, 0, 0) в его CSS. По-видимому, это известный источник потенциального хаоса в дочерних элементах с position: fixed.

Для того, что я пытался сделать (включение и выключение fixed как способ прикрепления ключевого навигационного элемента к верхней части страницы при прокрутке), решение было append на странице body, когда пришло время удерживать его на месте и вставлять обратно в свою обертку div, когда это было не так. Понятия не имею, если бы это помогло OP, но если вы преследуете эту ошибку самостоятельно, стоит изучить.

Ответ 2

Удалите свойство transform из родительского элемента фиксированного элемента.

По какой-то причине это приводит к тому, что фиксированный элемент становится относительно родителя, а не документа.

Пример кодепа.

Ответ 3

В моем случае родительский элемент не имеет свойства transform, но filter: drop-shadow(...), что вызвало ту же проблему. Снятие фильтра решило проблему.

Ответ 4

Предполагая, что этот вопрос больше для объяснения и меньше для решения... вот еще один взгляд:

Пояснение сначала

Сначала ваша скрипка

Вы используете position: fixed;, чтобы указать для общей строки поведения fixed и absolute позиция html одна и та же, за исключением того, что абсолютные divs прокручиваются вдоль документа и fixed не делают.

Обе эти позиции относятся к виду-порту, а не к его макету дизайна /css... т.е. просто поставлены, они не соответствуют потоку документа, так как их точкой отсчета являются размеры браузера, а не контейнер!

СЕЙЧАС, придя к решению для вас вопроса

первая демонстрация

добавьте это, и ваш код будет полезен!

 .hubbub:hover  h2 {
        display:block;
    }

Имейте в виду, который вы указали width: 100%; и text-align: center; на h2.subtitled, поэтому viewport и container будут иметь одинаковый вид в этом случае