쫑's바른생활

[코딩 초보 개발일지] 상세_08. position 본문

개발일지/상세

[코딩 초보 개발일지] 상세_08. position

쫑이야기 2023. 4. 16. 20:05
728x90
반응형

본문그림의
left 와 top 설명글의 위치가 서로바뀌었습니다.
참고해주세요.


position

: static | relative | absolute
요소가 배치되는 방식

<설정>

<div id="box">
        <div class="square1"></div>
        <div class="square2"></div>
        <div class="square3"></div>
</div>

static

 

position은 기본적으로 static 정렬(기본값)
작성된 순서대로 수직정렬됨
(static 값을 주나 안주나 동일함)

 

<style>
        #box{
            width: 500px;
            height: 800px;
            background-color: lightsalmon;
        }
        .square1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* position: static; */
        }
        .square2{
            width: 200px;
            height: 200px;
            background-color: red;
            /* position: static; */
        }
        .square3{
            width: 200px;
            height: 200px;
            background-color: green;
            /* position: static; */
        }
</style>

 

relative

원래 위치를 기준으로 상대적(relative)으로 배치

728x90

<style>
        #box{
            width: 500px;
            height: 800px;
            background-color: lightsalmon;
        }
        .square1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* position: static; */
        }
        .square2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .square3{
            width: 200px;
            height: 200px;
            background-color: green;
            /* position: static; */
        }
</style>

 

 

absolute

절대적(absolute)으로 요소를 배치.
상위요소(부모요소)를 기준으로 배치됨.
 
아래 예시에서, absolute의 배치 기준은
상위요소인 파란색 static.
 
만약 파란색 static 조차 없다면,
body가 기준이되어 배치됨
 
relative와 같이쓰일 수 있음.

 

<style>
        #box{
            width: 500px;
            height: 800px;
            background-color: lightsalmon;
        }
        .square1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* position: static; */
        }
        .square2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .square3{
            width: 200px;
            height: 200px;
            background-color: green;
            /* position: static; */
        }
</style>

 

relative_추가설명

 
absolute와 함께 쓰임.
absolute에 relative를 부여하여 relative가 부모요소가 되도록 할 수 있음.
=relative인 요소를 기준으로 배치됨
=부모요소일 때에만 relative를 부여할 수 있음.

 

<설정 : square2에 square4가 자식요소일 때>

<body>
    <div id="box">
        <div class="square1"></div>
        <div class="square2">
            <div class="square4"></div>
        </div>
        <div class="square3"></div>
    </div>
</body>

<style>
        #box{width: 500px;
            height: 800px;
            background-color: lightsalmon;
        }
        .square1{width: 200px;
            height: 200px;
            background-color: blue;
            /* position: static; */
        }
        .square2{width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .square3{width: 200px;
            height: 200px;
            background-color: green;
        }
        .square4{width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 50px;
            top: 50px;
        }
</style>

 

 

여기서 잠깐!
absolute를 쓰기위해 부모요소에 relative를 기준점으로 써줄 수 있고,

absolute를 쓰기위해 부모요소에 absolute를 또 써도
relative와 같은맥락으로 사용된다.

 

다만 다른점은

절대적인 위치이기 때문에

상대적으로 위치를 차지하는 relative와 달리

주변요소와 상대적으로 공존하지않고,

별도로 띄워진다고 생각하면 된다.

 

<style>
        #box{width: 500px;
        height: 800px;
        background-color: lightsalmon;
        }
        .square1{width: 200px;
        height: 200px;
        background-color: blue;
        /* position: static; */
        }
        .square2{width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        }
        .square3{width: 200px;
        height: 200px;
        background-color: green;
        }
        .square4{width: 200px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        left: 50px;
        top: 50px;
        }
</style>

 

끝!

 

728x90
반응형

'개발일지 > 상세' 카테고리의 다른 글

[코딩 초보 개발일지] 상세_07. transform:rotate  (0) 2023.04.16
[코딩 초보 개발일지] 상세_06. 반응형 알아보기(미디어쿼리 @media)  (1) 2023.04.13
[코딩 초보 개발일지] 상세_05. 블록/인라인 요소  (0) 2023.04.05
[코딩 초보 개발일지] 상세_04. 제목 태그, 목록 태그  (0) 2023.04.05
[코딩 초보 개발일지] 상세_03. 주석 배우기  (0) 2023.04.04
'개발일지/상세' Related Articles more
Comments