CSS Position

요소의 위치를 결정하는 방식을 설정

1. 정적위치 지정방식

아무런 위치지정이 없을 경우, 기본적으로 정적위치 지정방식으로 작동한다.

- static position (기본값)
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

2. 상대 위치 지정방식

- relative position
- HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함

<head>
    <title>상대 위치 지정방식</title>
    <style>
        div { width: 200px; padding: 20px;}
        .relative1 {background-color: deeppink;}
        .relative2 { 
            background-color: deepskyblue;
            position: relative;
            left: 200px;
            top: 100px;
        }
        .relative3 {
            background-color: gold;
            position: relative;
            right: 100px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <h2>상대 위치 지정방식</h2>
    <div class="relative1">상대 위치 지정방식1</div>
    <div class="relative2">상대 위치 지정방식2</div>
    <div class="relative3">상대 위치 지정방식3</div>
</body>

3. 고정 위치 지정방식

- fixed position 
- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함

<head>
    <title>고정 위치 지정방식</title>
    <style>
        #fx {
            position: fixed;
            width: 100px;
            height: 200px;
            background-color: gold;
            right: 10px;
            bottom: 10px;

        }
    </style>
</head>
<body>
    <h2>고정 위치 지정방식</h2>
    <div id="fx"></div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptas repellendus incidunt enim qui? In reiciendis, mollitia provident ab, qui recusandae impedit facilis animi architecto ut labore autem quaerat nemo!</p>
.
.
.
.

    </div>
</body>

하단의 노란 박스의 위치가 고정되어, 스크롤해도 해당 위치에 고정되어있다.

4. 부모태그를 이용한 고정 위치 지정방식

- sticky position
- fixed가 브라우저 화면의 절대 위치를 사용하는 반면, sticky는 부모 태그의 절대 위치값을 사용하는 방식
- 익스플로러에서는 작동하지 않음

<head>
    <title>스티키 지정방식</title>
    <style>
        html, body { margin: 0; padding: 0; }
        .header { height: 80px; background-color: gold;}
        .container{
            display: flex;
            flex-flow: row nowrap;
        }
        .content {
            width: 80%;
            height: 800px;
            background-color: deepskyblue;
        }
        .sidebar{
            position: sticky;
            top: 30px;
            width: 20%;
            background-color: deeppink;
            height: 400px;
        }
        .footer {
            background-color: yellowgreen;
            height: 100px;
        }
    </style>
</head>
<body>
    <h2>스티키 지정방식</h2>
    <header class="header">헤더</header>
    <name class="container">
        <section class="content">메인 컨텐트</section>
        <aside class="sidebar">Sticky 적용하기</aside>
    </name>
    <footer class="footer">푸터</footer>
</body>

5. 절대 위치 지정방식

- absolute position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 설정할 수 있음
- 조상요소를 가지지 않으면, body요소를 기준으로 위치를 설정
- 조상요소를 기준으로 위치를 설정하려면 조상요소가 반드시 정적 위치 지정방식이 아니어야 함
- top, left, right, bottom 속성값을 사용하여 설정함

<head>
    <title>절대 위치 지정방식</title>
    <style>
        #wrap {
            width: 500px;
            height: 500px;
            border: 3px solid red;
            position: relative;
        }
        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: deepskyblue;
        }

        #ab1 { top: 0; right: 0;}
        #ab2 { bottom: 0; left: 0;}
        #ab3 { bottom: 0; right: 0;}
        #ab4 { top: 100px; left: 150px;}
    </style>
</head>
<body>
    <h2>절대 위치 지정방식</h2>
    <div id="wrap">
        <div class="box" id="ab1"></div>
        <div class="box" id="ab2"></div>
        <div class="box" id="ab3"></div>
        <div class="box" id="ab4"></div>
        <div class="box" id="ab5"></div>
    </div>
</body>