CSS position

Dexter_- 2018. 9. 19. 10:13

728x90

position

static

static 은 기본값이다. 엘리먼트 위치가 지정된 것이 아니라고 표현하며,

static 이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.

<style>
    .static {
        position: satic;    
    }
</style>

relative

relative 는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다.

<style>
    .relative {
        position: relative;
    }
</style>

상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다.

다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다.

<style>
    .relative {
        position: relative;
        top: -20px;
        left: 20px;        
    }
</style>

relative 예제

<html>
<header>
    <style>
        .relative1 {
            position: relative;
            border: solid 1px black;
            padding: 10px;
            width: 600px;
        }    

        .relative2 {
            position: relative;
            top: -20px;
            left: 210px;
            width: 300px;
            border: solid 1px black;
            padding: 10px;
            background-color: white;
        }
    </style>
</header>
<body>
    <div class="relative1">position test relative1</div>
    <div class="relative2">position test relative2</div>
</body>
</html>

출력 결과:

fixed

fixed 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데,

이는 페이지가 스크롤 되더라도 늘 같은 곳에 위치한다는 뜻이다.

top이나 right, bottom, left프로퍼티가 사용된다.

<style>
    .fixed {
        position: fixed;
        bottom: 0;
        right: 0;    
    }
</style>

고정 엘리먼트는 공백을 페이지에 남기지 않는다.

absolute

absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운 곳에 위치한 부모 엘리먼트에 상대적으로

위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작한다.

절대 위치가 지정된 엘리먼트가 기준으로 삼는 부모 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고

페이지 스크롤에 따라 움직인다.

<style>
    .absolute {
        position: absolute;
        top: 120px;
        bottom: 0;
        right: 0;    
    }
</style>

728x90

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

'Style Sheet > CSS' 카테고리의 다른 글

s✨ CSS 박스 모델 (Box-model) (0)	2024.01.16
✨CSS 선택자 (0)	2024.01.15
CSS box-sizing 사용법 (0)	2018.09.18
CSS z-index 속성 (0)	2018.09.17
CSS display 태그 속성 정리 (0)	2018.09.11

Embedded Software Embedded Software