[CSS3] Position에 대해서 알아보기

HTML5 & CSS3

[CSS3] Position에 대해서 알아보기

YaluStar 2022. 12. 3. 01:25

안녕하세요.

이번에는 HTML에서 요소의 위치를 조정할 때 사용하는 기능에 속하는 CSS의 Position에 대해서 알아보겠습니다.

Position

HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS 속성입니다.
static, relative, absolute, fixed 속성이 존재합니다.
position 속성은 요소의 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용합니다.

1. static

기본적으로 적용되는 값이며, 정적 방식에 해당 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #circle1 {
            background-color: red;
        }
        #circle2 {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        #circle3 {
            background-color: bisque;
        }
        #circle4 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="circle1"></div>
    <div id="circle2">
        <div id="circle3"></div>
    </div>
    <div id="circle4"></div>
</body>
</html>

2. relative

상대적 위치 방식으로 적용되는 속성이며, static 속성을 기준으로 상대적으로 위치를 이동한다.

2-1. Ex1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #circle1 {
            background-color: red;
            position: relative;
            top: 100px;
            left: 300px;
        }
        #circle2 {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        #circle3 {
            background-color: bisque;
        }
        #circle4 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="circle1"></div>
    <div id="circle2">
        <div id="circle3"></div>
    </div>
    <div id="circle4"></div>
</body>
</html>

circle1 (빨간 원)에 relative 속성을 부여하면 circle1의 부모인 body를 기준으로 위치가 지정됩니다.

코드와 같이 top : 100px, left: 300px 를 지정하면 아래 그림과 같이 이동하게 됩니다.

2-2. Ex2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #circle1 {
            background-color: red;
        }
        #circle2 {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        #circle3 {
            background-color: bisque;
            position: relative;
            top: 100px;
            left: 300px;
        }
        #circle4 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="circle1"></div>
    <div id="circle2">
        <div id="circle3"></div>
    </div>
    <div id="circle4"></div>
</body>
</html>

circle3(베이지색) relative 속성을 부여하고 값을 적용하는 경우에는 circle3의 부모인 circle2를 기준으로 위치가 정해지기 때문에 아래와 그림과 같이 적용이 됩니다.

3. absolute

절대적 위치 방식으로 적용되는 속성이며, 값을 기준으로 위치를 이동한다.
부모가 Relative 속성을 가진 경우에는 부모 값을 기준으로 이동을 하지만, 아닌 경우에는 body를 기준으로 이동한다.

3-1. Ex1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #circle1 {
            background-color: red;
        }
        #circle2 {
            background-color: aqua;
            position: relative;
            left: 100px;
        }
        #circle3 {
            background-color: bisque;
            position: absolute;
            left: 10px;
        }
        #circle4 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="circle1"></div>
    <div id="circle2">
        <div id="circle3"></div>
    </div>
    <div id="circle4"></div>
</body>
</html>

부모인 circle2(바다색)가 relative 속성을 가지고 있는 상태에서

자식인 circle3(베이지색)이 absolute 속성을 가지고 있으면 부모 값을 기준으로 이동하게 됩니다.

3-2. Ex2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            position: absolute;;
        }
        #c1 {
            background-color: red;
        }
        #c2 {
            background-color: orange;
            left: 50px;
        }
        #c3 {
            background-color: yellow;
            left: 100px;
            z-index: 10;
        }
        #c4 {
            background-color: green;
            left: 150px;
        }
        #c5 {
            background-color: blue;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="c4"></div>
    <div id="c5"></div>
</body>
</html>

모든 div에 absolute 속성을 부여한 상태에서 값을 지정해주면 아래 그림과 같이 배치됩니다.

파란원이 제일 위에 있는 이유는 제일 마지막에 작성한 코드이기 때문입니다.

4. fixed

고정된 위치이며, 화면을 기준으로 위치가 지정됩니다.
스크롤이 내려가도 지정한 위치에 고정되어 있습니다.

4-1. Ex1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자 3</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #circle1 {
            background-color: red;
            left: 100px;
        }
        #circle2 {
            background-color: aqua;
            position: relative;
            left: 100px;
            top: 400px;
        }
        #circle3 {
            background-color: bisque;
            position: absolute;
            left: 10px;
        }
        #circle4 {
            background-color: greenyellow;
            position: fixed;
            left: 50px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div id="circle1"></div>
    <div id="circle2">
        <div id="circle3"></div>
    </div>
    <div id="circle4"></div>
</body>
</html>

circle4 (초록색)에 fixed 속성을 주고 left: 50px, top: 10px를 주면 현재 화면을 기준으로 고정되어 있는 결과를 볼 수 있습니다.

그리고 아래 그림과 같이 스크롤을 내려도 현재 화면이 기준이 되기 때문에 위치를 고정시켜 보여줍니다.

이상으로 HTML & CSS의 Position에 대하여 알아보았습니다.

감사합니다.

저작자표시 변경금지

'HTML5 & CSS3' 카테고리의 다른 글

[CSS3] transform에 대해서 알아보기 (0)	2022.12.05
[CSS3] z-index에 대해서 알아보기 (0)	2022.12.04
[CSS3] CSS 적용 우선 순위 (0)	2022.12.02
[CSS3] CSS 선택자에 대하여 알아보기 (0)	2022.12.02
[CSS3] CSS3 소개 및 상대경로, 절대경로에 대해 알아보기 (0)	2022.12.01

현재글[CSS3] Position에 대해서 알아보기

천천히 알아가는 세상