[CSS] - z-index 이용하여 창 맨위로 띄우기
○ z-index 이용하여 창 맨위로 띄우기 |
z-index 를 이용하여 내가 원하는 창을 만들어서 맨 위로 띄울 수가 있다 z-index 값이 높을 수록 맨 위에 뜬다 <!DOCTYPE html> <html lang="en"> <head> <html> <head> <meta charset='UTF-8'> <title>메인 페이지</title> <style> /* z-index 를 통해 우선순위 설정 높을수록 맨 위에 뜸 */ #bg { position: absolute; z-index: 5; background-color: black; height: 97%; /* 100%로 안하는 이유: 스크롤이 생기는 현상 발생 */ width: 99%; opacity: 0.3; display: none; /* 기본적으로 공지시항은 숨겨져 있다. */ } #notice { position: absolute; z-index: 7; background-color: wheat; height: 300px; width: 400px; top: 10%; left: 35%; display: none; /* 기본적으로 공지시항은 숨겨져 있다. */ /* display: block; 로 보이게 한다. */ } </style> </head> <body> <div id="bg"></div> <!-- 공지사항 --> <div id="notice"> <h2>공지사항</h2> <p>안녕하세요 관리자 입니다.</p> <p>이렇게 홈피 첨 들어갈때</p> <p>띄우는 창 z-index</p> <a href="#">닫기</a> <!-- 기능은 java-script 에서 구현 --> </div> <h1>메인 페이지닷</h1> <hr /> <div class="content"> 컨텐츠 내용이닷 </div> <hr /> <!-- 자바스크립트 부분(이미지 클릭 연동) --> <a href="javascript:doDisplay();"><img src="1.jpg" style="width:30%;"></a> </body> <!-- 클릭 시 이미지 style display 변경해서 보이게 안보이게 설정 --> <script type="text/javascript"> function doDisplay(){ var notice = document.getElementById('notice'); var bg = document.getElementById('bg'); if(notice.style.display=='none'){ notice.style.display='block'; bg.style.display='block'; } else { notice.style.display='none'; bg.style.display='none'; } } </script> </html>
|
'CSS' 카테고리의 다른 글
| [CSS] - 맨위로 버튼 만들고 Jquery 효과 주기 (0) | 2018.10.25 |
|---|---|
| [CSS] - relative absolute 이용하여 이미지 가운데에 타이틀 띄우기 (0) | 2018.10.21 |
| [CSS] - owlcarousel 이용한 다중 캐러셀에서 a href 안될 때 해결법 (0) | 2018.09.29 |
| [CSS] - bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀 (0) | 2018.09.28 |
| [CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기 (0) | 2018.09.18 |