CSS

[CSS] - z-index 이용하여 창 맨위로 띄우기

Riucc 2018. 10. 20. 10:58

○ 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>


 


저작자표시