[html] CSS 나는 div가 모든 것의 위에 있기를 원합니다.

모든 것 위에 html div 태그를 만들려면 어떻게해야합니까?

답변

Z- 색인이 작동하려면 요소에 position:absolute또는 position:relative속성 을 제공해야 합니다. 그렇게하면 링크가 제대로 작동하지만 나중에 CSS를 약간 조정해야 할 수도 있습니다.

답변

대한 z-index:1000영향을 미칠 수는 비 정적 위치 방식이 필요합니다.

position:relative;상단에 배치하려는 요소를 선택하는 규칙에 추가

답변

예, Z- 색인이 작동하려면 요소에 position : absolute 또는 position : relative 속성을 지정해야합니다.

하지만 … 부모에게주의하세요!

공통 부모 수준에서 첫 번째 하위 항목에 정의 된 Z- 색인이 있는지 확인하려면 요소의 노드로 이동해야합니다.

기본에 더 낮은 명확한 Z- 색인이있는 경우 다른 모든 하위 항목은 전경에있을 수 없습니다.

이 스 니펫 예에서 div1-2-1은 Z- 색인이 1000이지만 Z- 색인이 3 인 div1-1-1 아래에 있습니다.

이는 div1-1의 Z- 색인이 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>

스 니펫 확장

답변

position:relative;메뉴 에 추가해야 합니다. Z- 색인은 비 정적 위치 지정 체계가있는 경우에만 작동합니다.

답변

z-index속성을 사용하면 전면에서 제어 할 수 있습니다. 더 큰 숫자를 설정하면 요소가 높아집니다.

position의 relative위치는 html-element모든 차원에서 다른 컨트롤에 대해 상대적으로 위치해야 하기 때문 입니다.

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

답변

나는 당신이 WW3 학교의 코드로 팝업을 만든다고 가정 할 것입니다. 맞죠? 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 */
}