CSS Я хочу, чтобы div был поверх всего

Ответы:

120

Чтобы z-index работал, вам нужно указать элемент a position:absoluteили position:relativeсвойство. Как только вы это сделаете, ваши ссылки будут работать правильно, хотя вам, возможно, впоследствии придется немного подправить свой CSS.

Скайлар Андерсон
источник
Я хотел использовать фиксированную схему, поэтому я сохранил положение как фиксированное, но все же установил z-index на 1000 и получил желаемые результаты, он покрыл div ниже на странице, когда я прокручивал, вы можете объяснить, почему это произошло, хотя Я использовал статическое положение?
Boo89100
38

Для z-index:1000получения эффекта вам нужна нестатическая схема позиционирования.

Добавить position:relative;в правило, выбрав элемент, который должен быть наверху

Ричард Дж. П. Ле Гуен
источник
24

Да, чтобы z-index работал, вам нужно присвоить элементу свойство position: absolute или position: relative.

Но ... обратите внимание на родителей!

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

Все остальные потомки никогда не могут быть на переднем плане, если у основания есть более низкий определенный z-индекс.

В этом примере фрагмента div1-2-1 имеет z-index, равный 1000, но, тем не менее, находится под div1-1-1, у которого z-index равен 3.

Это потому, что у div1-1 z-index больше, чем у div1-2.

введите описание изображения здесь

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>
Развернуть фрагмент

А. Морель
источник
Вы палочка-выручалочка!
Бенджамин Карлог
16

Вам нужно добавить position:relative;в меню. Z-index работает только при нестатической схеме позиционирования.

Рич Брэдшоу
источник
9

z-indexсвойство позволяет вам взять под свой контроль впереди. чем большее число вы устанавливаете, тем выше ваш элемент.

positionсвойство должно быть, relativeпотому что положение html-elementдолжно быть расположено относительно других элементов управления во всех измерениях.

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}
Викрант Кашьяп
источник
4

Я предполагал, что вы делаете всплывающее окно с кодом из школы Третьей мировой войны, верно? проверьте это css. .modal, там уже z-indexесть слово . просто измените с 1 на 100.

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
KhmerNews Tech
источник