CSS Divs перекрывается, как я могу заставить одно над другим?

Я новичок в CSS и пытаюсь создать свой сайт. Я сталкиваюсь с проблемой. Я создал div с фиксированной позицией, однако он появляется ниже других элементов на сайте. Как перенести его вверх?

div#floater {
    position: fixed; 
    top: 420px; 
    left: -110px;   
}

div#floater:hover {
    left: 0;

Сайт можно найти на goinnativerecords.com(наведите указатель мыши на изображения в сторону). Я знаю, что мое кодирование не является самым чистым (советы приветствуются).

Спасибо!

Ответы

Ответ 1

просто используйте z-index:

z-index : 1;

Обратите внимание, что z-индекс работает только с элементами, которые имеют какой-то набор позиционирования (относительный, абсолютный, фиксированный)

нюансы:

Элементы с более высоким z-индексом будут отображаться перед элементами с более низким z-индексом в том же контексте стекирования. Если два элемента имеют одинаковый z-индекс, последний отображается сверху. Контекст стека определяется:

  • Корень документа
  • Элементы с position: absolute или position: relative и z-index
  • Элементы, которые частично прозрачны, то есть имеют непрозрачность < 1
  • В IE7 любой элемент с position: absolute или position: relative (это может вызвать множество ошибок, поскольку это единственный браузер, который действует таким образом)

Если IE7 является проблемой, вы можете заставить все браузеры вести себя одинаково, всегда добавляя z-index : 1 к любому элементу, у которого также есть набор position.

Ответ 3

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

div#floater {    position: absolute;     top: 420px;     left: -110px;   }
div#floater:hover {    left: 0;}