미누에요

[HTML/CSS] CSS position:relative , static 본문

Web

[HTML/CSS] CSS position:relative , static

미누라니까요 2023. 12. 17. 16:44
728x90
반응형
SMALL

CSS에서 콘텐츠의 위치를 지정해주는 요소에는 position이 있다.

 

그 중에서 relative, static에 대하여 설명하겠다

 

 

position : static

따로 지정해주지 않은 콘텐츠라면 기본적으로 position : static으로 설정된다.

기본값으로 설정되어 있기 때문에 따로 적어주지 않아도 된다.

static(정적)인 상태를 의미한다.

 

 

 

 

position : relative 

보통 콘텐츠의 위치를 이동시키기 위해 많이 사용한다.

원래 위치에 대해 상대적으로 움직한다는 뜻이다.

<!DOCTYPE html>

<html>
    <head>
        <style>
            div{
                border: 5px solid blue;
            }
            .minibox2{
                position:relative;
                left:100px;
            }
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">
            box2
            <div class="minibox2">mini</div>
        </div>
        <div class="box3">box3</div>
        
    </body>
</html>

위 코드에서 mini 콘텐츠를 position:relative 를 사용하여 위치를 이동시켰다.

left:100px의 의미는 포지셔닝을 relative로 바꾸었으니 왼쪽을 기준으로 100픽셀만큼 이동시킨다는 의미이다.

결과를 보자.

 

결과

 

 

만약 위 코드의 postion 속성값이 relative가 아니라 static이었다면 mini 콘텐트는 이동하지 않았을 것이다.

relative로 설정하여 위치를 이동시킬 경우, 원래 있던 위치에 대하여 상대적으로 이동한다.

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex  (1) 2023.12.20
[HTML/CSS] position : absolute , fixed  (1) 2023.12.17
[HTML/CSS] CSS 결합자 (CSS Combinters)  (0) 2023.12.14
[HTML/CSS] CSS 선택자 (CSS Selector)  (0) 2023.12.13
[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기  (1) 2023.12.09
'Web' Related Articles more