CSS я хочу, чтобы div был на вершине всего

Как сделать HTML div тег, чтобы быть на вершине всего?

6 71
html css

6 ответов:

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

83

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

добавить position:relative; правила #settingsdetails в строке 8 файла mystyle.css

29

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

15

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

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

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}
7

Я предполагаю, что вы делаете всплывающее окно с кодом из школы WW3, правильно? проверьте это css. этот.модальный один, там уже слово 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 */
}
3

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

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

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

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

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

это потому, что div1-1 имеет Z-индекс больше, чем div1-2.

.div {
  
}

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

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

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

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

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

}
<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
    <div class="div" id="div1-2-1"></br></br></br>div1-2-1</br>z-index: 1000!!</div>
  </div>
</div>
0