Building value

CSS[Position 속성] 본문

CSS

CSS[Position 속성]

developer_Michael 2023. 4. 3. 17:40
반응형

CSS에서 position 속성은 요소의 위치를 지정하는 데 사용됩니다. 

 

position 속성은 일반적으로 다른 CSS 속성과 함께 사용되어 요소의 위치, 크기 및 레이아웃을 조정하는 데 사용됩니다.

position 속성에는 4가지 값이 있습니다.

static: 기본 값으로, 요소의 위치를 변경하지 않습니다.
relative: 요소의 위치를 현재 위치를 기준으로 상대적으로 이동시킵니다.
absolute: 요소를 가장 가까운 상위(조상) 요소를 기준으로 위치를 지정합니다.
fixed: 요소를 뷰포트(Viewport)의 상대적인 위치로 고정합니다.

relative 값은 top, bottom, left, right 속성과 함께 사용되어 

 

현재 위치를 기준으로 요소를 상대적으로 이동시킬 수 있습니다. 

 

absolute 값은 부모 요소 중 가장 가까운 요소를 기준으로 위치를 지정할 수 있으며, 

 

이 때 부모 요소는 반드시 relative나 absolute 값을 가진 요소여야 합니다.

 

fixed 값은 요소를 뷰포트의 상대적인 위치로 고정시키며, 스크롤해도 항상 같은 위치에 있게 됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: lightblue;
        }
        .box1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box3 {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

위 코드에서 .container 클래스는 포함된 모든 요소를 감싸는 컨테이너 역할을 하며, 

 

position: relative; 속성을 갖고 있습니다.

.box1과 .box2 클래스는 position: absolute; 속성을 갖고 있으며, .container 클래스에 상대적으로 위치를 지정합니다.

.box3 클래스는 position: relative; 속성을 갖고 있으며, .container 클래스의 자식 요소 중에서 상대적으로 위치를 조정합니다.

이 예시에서 .box1 클래스는 상위 요소인 .container의 좌측 상단 모서리를 기준으로 top: 0, left: 0 으로 위치를 지정했기 때문에, .container의 좌측 상단 모서리에 위치합니다.

.box2 클래스는 top: 50px, left: 50px 으로 지정하여 .box1과 겹치지 않는 위치를 가지며, .container의 좌측 상단 모서리를 기준으로 상대적으로 위치를 지정합니다.

.box3 클래스는 position: relative; 속성을 갖고 있지만, top과 left 값을 지정해줘서 .container의 좌측 상단 모서리를 기준으로 50px 아래, 50px 우측에 위치합니다.

반응형

'CSS' 카테고리의 다른 글

CSS[Media Query]  (0) 2023.04.05
CSS[Display 속성]  (0) 2023.04.04
CSS[Float&Clear]  (0) 2023.04.03
CSS[색상]  (0) 2023.03.31
CSS[단위]  (0) 2023.03.31
'CSS' Related Articles more