Почему я не могу z-индексировать свои комментарии и нижний колонтитул поверх основного контента?

Мой сайт WordPress, похоже, не позволяет мне z-индексировать мой раздел комментариев поверх моего основного контента. Моя цель состоит в том, чтобы мой .column-left был зафиксирован в положении, но он перекрывает все, что находится под ним. Это то, что у меня сейчас есть, и вы увидите его в прямом эфире на jpshots.com.

<div class = "guts">
<div class = "column-left"> copy </div>
<div class = "colum-right"> gallery </div>
<div class = "clear"></div>

.column-left{
float:left;
display: block;
width: 35%;
position: relative; 
height:100%;
z-index:1
}


#comments{
z-index:99999;
}

footer{
z-index:999999;
}

Когда я пытаюсь переключить тип позиции .column-left, он скрывает его. Любое понимание будет с благодарностью!

ДА! Добавление position:relative в нижний колонтитул и раздел комментариев помогло. Спасибо!

JP Richardson 21.06.2019 19:40
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

z-index не работает с элементами position:static (что, как ни странно, установлено по умолчанию).

z-index влияет только на элементы position:relative, position:absolute и position:fixed.

Попробуйте добавить position:relative к своим элементам.

Обратите внимание, что position:relative работает почти так же, как position:static, но также работает с абсолютным позиционированием и z-индексом.

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