관리 메뉴

웹개발자의 기지개

div 태그의 z-index 와 zIndex 유의점 본문

jquery

div 태그의 z-index 와 zIndex 유의점

http://portfolio.wonpaper.net 2018. 12. 14. 23:37

1. CSS상에서 z-index


 

<style type="css/text">

  div {

         position:absolute;

         top: 50px; left: 50px;

         z-index: 10;

  }

</style>



위 소스상에서 div 태그는 z-index 값에 의해 10 의 값으로 임의 지정했는데, 뒷배경 태그 위쪽에 나타난다. 

이때, 이 수치는 높을수록 더 위쪽에 나타난다.


그런데, javascript 상에서도 이와 같은 z-index 값을 쓸려고 하면,  키워드 단어가 좀다르다. zIndex (대소문자 주의) 이다.


2. javascript 상에서 zIndex


<script>

   divList = document.createElement("div");

   divList.id = "divAutoCom";

   divList.style.border = "solid 1px #dddddd";

   divList.style.backgroundColor = "white";

   divList.style.width = "500px";

   divList.style.position = "absolute";

   divList.style.zIndex = "20";

</script>


Comments