css - position

Position 은 문서에서 어떻게 요소를 배치할 것인지 결정하는 속성이다. 웹 프론트엔드 작업을 할 때마다 주먹구구 식으로 수정해왔는데 이번에 제대로 개념을 정리하고 가려고 한다. 

 

static

position 속성의 기본 값이며 position 값을 채우지 않으면 자동으로 이 값으로 설정된다. 상위 부모를 배치 기준으로 삼으며 top, left, right, bottom 값은 유효하지 않다. 위에서부터 차곡차곡 쌓인다. 그림에서 static 2를 보면 static 요소 바로 밑에서 위치하는 것을 확인 할 수 있다. top이 먹지 않기 때문에 margin을 이용해서 여백을 만들었다

 

<div style={{
    height: "150px",
    width: "500px",
    backgroundColor: "tomato",
}}>
    <div style={{
        fontWeight: "bold",
        fontSize: "30px"
    }}>
        static
    </div>
    position 의 기본값이다. 특별한 값을 세팅하지 않으면 위에서부터 차곡차고 쌓여간다. top, left, right, bottom 설정은 무시된다
</div>
<div style={{
    height: "50px",
    width: "500px",
    backgroundColor: "tomato",
    marginTop: "20px"
}}>
    <div style={{
        fontWeight: "bold",
        fontSize: "30px"
    }}>
        static2
    </div>
</div>

 

relative

요소가 원래 위치하는 곳에서 상대적인 위치를 정할 수 있다. top, left, right, bottom 값이 이때는 유효하다. 그림에서 relative 는 static 2 밑에 위치하는데 top, left 를 이용해 여백이 생긴 것을 확인 할 수 있다.

 

<div style={{
    position: "relative",
    width: "500px",
    height: "230px",
    top: "30px",
    left: "100px",
    backgroundColor: "cyan",
}}>
    <div style={{
        fontWeight: "bold",
        fontSize: "30px"
    }}>
        relative
    </div>
    static일 때 설정되는 요소의 위치 기준으로 상대적인 위치를 결정함. top, left, right, bottom 설정을 통해 상대적 위치를 결정 할 수 있다

    ...
</div>

 

absolute

상위 요소중 static이 아닌 첫번째 요소를 자신의 배치 기준으로 삼는다. 절대적인 이라는 뜻과는 무관하게 행동하는 것 같은 느낌이다. 그림에서 밑에 있는 Absolute2는 코드 상으로는 static3 에 포함됐지만 relative2를 자신의 상위 요소로 삼고 있는 것을 확인 할 수 있다.

 

<div style={{
    position: "relative",
    width: "500px",
    height: "400px",
    top: "30px",
    backgroundColor: "cyan",
}}>
    <h1>relative2</h1>

    <div style={{
        position: "static",
        height: "200px",
        width: "300px",
        backgroundColor: "tomato"
    }}>

        <div style={{
            fontWeight: "bold",
            fontSize: "30px"
        }}>
            static3
        </div>

        <div style={{
            width: "300px",
            height: "100px",
            top: "50px",
            right: "0px",
            backgroundColor: "skyblue",
            position: "absolute"
        }}>
            <div style={{
                fontWeight: "bold",
                fontSize: "30px"
            }}>
                Absolute2
            </div>
            static 3에 포함됐지만 relative 2를 자신의 상위 요소로 삼는 것을 확인 할 수 있다.
        </div>
    </div>

 

fixed

배치의 기준을 전체 브라우저로 삼는다. top, left, bottom, right 값은 모두 브라우저를 기준으로 삼게 된다. 그래서 화면을 스크롤 하더라도 고정된 공간에 위치한다.  코드상으로는 Relative2에 포함됐지만 브라우저를 상위 배치 기준으로 삼고 있다.

 

<div style={{
    position: "relative",
    width: "500px",
    height: "400px",
    top: "30px",
    backgroundColor: "cyan",
}}>
    <h1>relative2</h1>

    ...

    <div style={{
        width: "500px",
        height: "200px",
        position: "fixed",
        backgroundColor: "pink",
        bottom: "100px",
        right: "10px"
    }}>
        <div style={{
            fontWeight: "bold",
            fontSize: "30px"
        }}>
            fixed
        </div>
        화면을 위아래 스크롤 하더라도 고정된 공간에 위치한다. 배치 기준은 부모요소가 아닌 뷰포트 즉 브라우저 전체 화면이며 top, left, right, bottom을 기준으로 위치할 공간을 고정해줄 수 있다.
        Relative2 에 포함됐지만 브라우저를 자신의 상위 배치 기준으로 삼고 있다.
    </div>
</div>

 

 

전체코드

https://github.com/kwony/nextjs-study/blob/main/pages/position/index.tsx