[CSS] position 속성, z-index

리버 River 2024. 3. 25. 22:01

2024. 3. 25. 22:01

1. position 속성

🥑 배치 방법을 지정하는 속성
🥑 각 요소의 위치를 정하는 방법

상대 위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정
절대 위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정

💡 함께 적용가능한 속성
top - y축 상단기준
bottom - y축 하단기준
left - x축 좌측기준
right - x축 우측기준
z-index - 요소의 쌓임 순서를 정의. 값이 클 수록 앞쪽에 배치 된다.

종류	설명
static	문서의 흐름(위에서 아래로 순서대로 배치)에 맞춰 배치. 기본값.
relative	상대 좌표와 함께 위치를 지정 (상대위치 지정방식) 태그가 만들어진 순서대로 나열
absolute	절대 위치 좌표를 설정. 부모 박스 기준으로 좌표를 설정 단, 부모 요소가 static일 경우 부모 요소로 인식하지 않음
fixed	고정된 상태로 위치가 지정

static

위치지정불가 ) top, left, right, bottom의 영향을 받지 않음

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            /* position 속성을 지정하지 않은 상태 : static */
            left: 100px; /* 좌표 인식이 안됨 */
            top: 100px; /* 좌표 인식이 안됨 */
        }
    </style>
</head>
<body>
    <div>static-1</div>
    <div>static-2</div>
    <div>static-3</div>
</body>

relative

위치지정가능) 부모박스의 역할로 주로 사용

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position : relative; /* 상대좌표 */
            top : 100px;
            left : 100px;
        }

    </style>
</head>
<body>
    <div>relative-1</div>
    <div>relative-2</div>
    <div>relative-3</div>
</body>

absolute

html 화면(x, y)을 기준으로 위치가 지정.
만들어진 순서대로 위쪽에 배치 (위치지정 가능) top, left, right, bottom의 영향을 받음.
기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position 속성을 relative로 지정해 놓고 사용해야 함

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .movie { /* 부모 요소 */
            width: 700px;
            height: 500px;
            border: 2px solid gray;
            background-color: darkslateblue;

            position: relative; /* 상대 좌표 */
        }

        /* 자식 요소 */
        /* 버튼 */
        .movie div {
            width: 120px;
            height: 120px;
            border: none;
            border-radius: 120px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 120px;
            font-size: 30px;

            position: absolute;
        }

        .prev {
            top: 50%; /* top으로의 위치 */
            left: 10px; /* left로의 위치 */
            margin-top: -60px; /* 반지름 값만큼 빼줘야 중앙 정렬이 됨 */
        }

        .play {
            top: calc(50% - 60px);
            left: calc(50% - 60px);
        }

        .next {
            top: calc(50% - 60px);
            right: 10px;
        }

    </style>
</head>
<body>
    <!--부모 요소 relative -->
    <div class="movie">
        <!--자식 요소 absollute -->
        <div class="prev">PREV</div>
        <div class="play">▶</div>
        <div class="next">NEXT</div>
    </div>

</body>

fixed

스크롤과 상관없이 html화면기준 좌측상단을 기준으로 좌표고정
top,left, right, bottom의 영향을 받음

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px; /* 스크롤 바를 나타내기 위해 문서의 높이를 임의의 크기로 지정 */
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: red;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            position: absolute;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: orangered;
            right: 100px; /* 오른쪽 좌표 */
            bottom: 100px; /* 하단 좌표 */
            position: fixed;
        }

    </style>
</head>
<body>
    <div>absolute</div>
    <div>fixed</div>
</body>

z-index

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 300px;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px;
            text-align: center;

            position: absolute; /* 절대 좌표 */
        }

        div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
            background-color: indianred;
            left: 100px; /* 왼쪽 좌표 */
            top: 100px; /* 상단 좌표 */
            z-index: 5;
        }

        div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
            background-color: lightgoldenrodyellow;
            left: 250px; /* 왼쪽 좌표 */
            top: 250px; /* 상단 좌표 */
            z-index: 3; /* 우선 순위 변경 */
        }

        div:nth-of-type(3) { /* div 박스 중에서 세 번째 박스 */
            background-color: teal;
            left: 400px; /* 왼쪽 좌표 */
            top: 400px; /* 상단 좌표 */
        }

    </style>
</head>
<body>
    <div>box-1</div>
    <div>box-2</div>
    <div>box-3</div>
</body>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스 박스 \| 크기를 지정하지 않은 경우 속성 적용 결과 ver (0)	2024.03.26
[CSS] 플렉스(flex) 박스 \| flex-direction, flex-wrap, justify-content, align-content, align-items (0)	2024.03.26
[CSS] 목록 스타일, 표 스타일 (1)	2024.03.23
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 (0)	2024.03.23
[CSS] 배경 이미지 지정과 속성 (0)	2024.03.22

ID_ allriver

[CSS] position 속성, z-index

1. position 속성

'HTML&CSS > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바