📦 CSS/CSS

[CSS] Position Property(위치 속성)

하나둘세현 2022. 11. 14. 01:09
728x90

위치 특성

위치 특성은 문서 내에서 요소의 위치를 설정하는 것이다. 중요한 점은 이 특성이 설정한 위치에 따라서 4개의 다른 특성인 top, right, bottom, left이 결정된다는 것이다. 

위치 특성으로 사용하는 특성 값은 static, relative, avsolute 등 이다.

"static"

div {
    width: 100px;
    height: 100px;
    background-color: #3d405b;
    border: 2px solid black;
    margin: 10px;
    display: inline-block;
}

#middle {
    background-color: #81b29a;
}

가운데의 <div> 위치 변경 확인을 위해 다른 컬러를 넣었다. 

디폴트는  static이다. 지금까지 다뤘던 모든 요소의 기본 위치 특성이다.

#static #middle {
    position: static;
}

선택한 다음 id에 middle을 넣어서 이 div를 호출한다. 위치에 static을 적었더니 위의 사진과 똑같이 나왔다. 변화가 없었다.

요소의 위치가 static이면 변화가 없다.

 

"relative"

#relative #middle {
    position: relative;
    top: 100px;
}

relative를 쓰면 문서의 일반적인 흐름에 따라 위치가 정해지지만 top, left, rigt, bottom 으로 현 위치와의 상대적 위치로 오프셋을 줄 수 있다. 

현재위치에서 요소에 offset을 줄 수 있다. top:100px;를 입력하면 밑으로 100px 만큼 내려간다. 다른 부분은 이동하지 않았다.

#relative #middle {
    position: relative;
    top: 100px;
    left: 100px;
}

오프셋을 주지 않은 원래 위치에서 상대적인 위치로 이동한 것이다.  left: 100px;를 입력하면 실제로는 오른쪽으로 이동한 것이다. left의 오프셋을 주어서 오른쪽 100px로 이동한 것이다. 

 

 

 

 

#relative #middle {
    position: relative;
    top: 100px;
    left:-100px;
}

 

왼쪽으로 오프셋을 주려고 음수값을 써 넣고 위에도 음수값으로 바꾸면 된다. 아니면 픽셀이 아닌 다른 단위도 쓸 수있다. 

#relative #middle {
    position: relative;
    top: 50px;
    /* left: 100px; */
}

이렇게 수정했다.

상대적인 개념이라 문서 안에 요소의 원래 자리가 있긴 하지만 원래 위치로부터 상대적인 곳에 배치되는 것이다. 

 

"absolute"

위치를 absoulte로 설정하면 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않는다. 

#absolute #middle {
    position: absolute;
}

div 두개만 있는 것처럼 보이지만 실제로는 아니다. 가운데 색상 뒤에는 남색 div가 있는 상태이다. 가운데의 초록색의 div는 문서에서 공간을 차지하고 잇지 않다. 문서 흐름에서 제거되어서 이 공간에 겹쳐진것이다.

#absolute #middle {
    position: absolute;
    top: 50px;
}

 

초록색 상자는 위로 올라갔다. 왜 그런걸까?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

#absolute #middle {
    position: absolute;
    top: 50px;
    left: 50px;
}

left: 50px를 입력하니 왼쪽으로 움직였다.

 

absolute는 요소가 문서의 일반적인 흐름에서 제거되지만 가장 가까이 위치한 조상이 있다면 해당 조상을 기준으로 하거나 조상이 가까이 없다면 초기 컨테이닝 블록 즉 <body>를 기준으로 상대적인 위치에 배치된다는 것이다. 

 

➡️ 위치 지정 요소 안에 중첩된 게 아니라면 이렇게 화면 위쪽에 보이듯이 상대적인 위치에 배치되는 것이다. 

어떤 요소의 위치가 지정되면 static이 아닌 위치 세트가 있는 거다.

 

 

 

 

 

 

 

 

 

#absolute {
    position: relative;
}

#absolute #middle {
    position: absolute;
    top: 50px;
    left: 50px;
}

여기서 id가 absolute인 부모 요소의 위치를 지정하려면

해당 <section>에 absoulte를 입력하고 position: relative라고 입력한다.

absoulte 위치를 지정하고 위쪽과 왼쪽으로 50px 씩 오프셋을 준 바로 이 div에 이치가 지정된 조상이 생기는 거다.

그럼 더 이상 div가 이 위에 배치되지 않고 조상으로부터 상대적인 위치에 있게 된것이다. 

 

부모 요소의 위치 특성에 따라 달라진다.

 

 

 

 

 

 

"fixed"

#fixed #middle {
    position: fixed;
}

absolute때와 동일하다.

 

 

 

#fixed #middle {
    position: fixed;
    top: 0px;
    left: 0px;
}

오프셋을 주지 않으니까 컨테이닝 블록의 맨 위로 올라갔다. 

페이지의 제일 윗부분 ㅇㅇ

fixed로 지정된면 그 자리에 계속 유지된다.

배치되는 위치는 항상 컨테이닝 블록에 상대적이다. 

absolute랑 약간 비슷하다. 부모 요소 같은것과는 관계가 없다는 점만 다르다. 

fixed는 일반 문서 흐름에서 제거되고 

공간도 차지하지 않으며 

초기 컨테이닝 블록의 상대적 위치이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

스크롤을 다운해도 초록색은 계속있다. 오프셋을 항상 주는 상태로 유지된다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

"sticky"

시작할 때는 위쪽에 고정되지 않은 상태로 일단 스크롤을 따라 가지만 위쪽에 도달하면 그 위치에 머루게 된다.

스티커처럼 유용하게 사용할 수 있다.

처음에 고정하지 않았다가 나중에 고정할 수 있다. 

 

 

 

디폴트? default? 기본 설정 값

오프셋?

상대적이다??

728x90

'📦 CSS > CSS' 카테고리의 다른 글

[CSS] Transform  (0) 2022.11.17
[CSS] Transition(CSS 전환)  (0) 2022.11.14
[CSS] 알파 채널 | Opacity(불투명도)  (0) 2022.11.10
[CSS] CSS 단위  (0) 2022.11.08
[CSS] 디스플레이 속성  (0) 2022.11.05

'📦 CSS/CSS'의 다른글

  • 현재글[CSS] Position Property(위치 속성)

관련글

티스토리툴바