Перекрывающийся абсолютно позиционированный контент

StackOverflow https://stackoverflow.com/questions/1290877

  •  18-09-2019
  •  | 
  •  

Вопрос

У меня возникли небольшие трудности с эта страница.Это ПОЧТИ работает правильно.

Красная рамка должна располагаться по центру (h & v) окна.РАБОТАЕТ.

Желтая рамка должна быть прикреплена к нижней части окна.РАБОТАЕТ.

Когда высота окна составляет менее 400 пикселей, должны появиться полосы прокрутки и желтое поле в нижней части области прокрутки. В принципе, я никогда не хочу, чтобы желтое поле появлялось поверх красного, или наоборот.НЕ РАБОТАЕТ

Кто-нибудь знает, как я могу этого добиться?

Спасибо.

Это было полезно?

Решение

Добавьте это в CSS для #wrapper:

height: 100%;
position: relative;

Причина, по которой это работает, заключается в том, что ваши абсолютно позиционированные элементы расположены относительно окна просмотра из-за отсутствия каких-либо других содержащий блок.Путем добавления position: relative к тому #wrapper (или тот body если уж на то пошло) вы убедитесь, что вместо этого содержащий блок становится всем содержимым основного текста.

В height: 100% затем это необходимо только для того, чтобы убедиться, что содержащий блок, по крайней мере, достигает нижней части окна просмотра.

Другие советы

#footer{z-index: 1000;}
#logo{z-index: 1001;}

z-индекс - это то, что вам нужно.хотя 1000 - это немного чрезмерно, простой 

#footer{ z-index:2; }
#logo{ z-index:3; }

сделал бы свое дело

Полезно помнить об этом, не уточняя z-index, элементы складываются с последним элементом 'highest' в z-порядке.Итак, если вы хотели избежать указания z-index, перевернуть html:

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

В противном случае, как следует из другого ответа, указав большее число для #logo чем для #footer вызовет #logo чтобы быть выше.

Для принудительного использования полос прокрутки, когда окно просмотра порта < 400 пикселей,

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

Z-Индекс здесь не является фактором.Z-Index по-прежнему позволит элементам перекрываться - он будет только определять, какой элемент находится сверху.

Используйте плаватьing элемент после красного div в потоке документов, а затем использование Очистить на желтом, чтобы создать связь между элементами (т.е.желтый div будет Очистить красный и не будет перекрываться).

Размещение элемента относительно большого размера (например, высота:100%) между ними желтый div переместится в нижнюю часть экрана, но правильное выравнивание по вертикали может оказаться сложным.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top