Position
기본적으로, position은 요소의 위치를 지정하는 속성이다.
position을 알기 전, float와 margin으로 어떻게든 위치를 옮겨보겠다고 끙끙대던 나와는 이제 작별!
position의 다양한 속성값으로 요소를 어떻게 배치할 수 있는지 알아보고 개념있는 개자이너로 거듭나보도록 하자.🐶
static (기본값)
<div class="wrapper">
<div class="box" id="one">(1)</div>
<div class="box" id="two">(2)</div>
<div class="box" id="three">(3)</div>
<div class="box" id="four">(4)</div>
</div> .wrapper {
border: 5px solid rgb(25, 163, 255);
width: 500px;
height: 300px;
margin: 30px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: rgb(255, 153, 0);
font-weight: bold;
}
#two {
position: static;
background: rgb(152, 202, 94);
}이번 예시의 HTML은 위와 같음
따로 지정하지 않으면, 모든 요소는 static으로 동작한다.
-
static상태에서 요소는 일반적인 문서 흐름에 따라 배치되고, -
top,bottom,left,right,z-index속성이 적용되지 않는다.
이 상태에서, 색깔이 다른 (2) 블록을 움직이면서 비교해보자.
relative
#two {
position: relative;
top: 20px;
left: 20px;
background: rgb(152, 202, 94);
}relative는 요소의 위치를 상대적으로 지정한다.
-
relative요소는 일반적인 문서 흐름에 따라 배치되고, -
top,bottom,left,right값에 따라 이동하지만, 원래 있던 위치의 공간은 유지된다.즉, 이동한다고 해서 다른 요소의 위치에 영향을 주지 않는다!
위 예시에서도 (2) 블록이 이동했음에도 나머지 (1), (3), (4) 블록의 위치에는 변동이 없음. -
z-index값도 적용할 수 있는데,z-index가 기본값auto가 아니라면 새로운 Stacking context를 생성한다.포토샵으로 따졌을 때, 새로운 레이어 개념을 형성한다고 생각하면 될 듯 하다.
위 예시에서, 나는 (2) 블록을 이동하기 위해 top과 left를 부여했다.
그런데 실제로 (2) 블록이 이동한 방향을 보면, 오른쪽 아래로 이동했다는 것을 알 수 있다.
원래 위치(빨간 테두리)의 top을 기준으로 20px 아래, 그리고 left기준 20px 오른쪽으로 이동한 것이다.
즉
position: relative일 때,top,bottom,left,right속성은 특정 방향"으로" 움직이게 하는 것이 아니라, 어떤 방향 "으로부터" 이동한다고 생각해야 한다.
이는relative가 자신의 원래 위치를 기준으로 새로운 위치를 결정하는,
상대적 위치 결정 요소이기 때문이다!
absolute
absolute는 요소를 절대적으로 배치한다.
-
absolute요소는 일반적인 문서 흐름에서 아예 벗어나게 되고,
따라서 다른 요소는absolute요소가 존재하지 않는 것처럼 배치된다! -
부모 요소 중
static이 아닌 가장 가까운 조상 요소를 기준으로 배치되는데,
그런 부모가 없는 경우body(뷰포트)를 기준으로 위치를 결정한다.
위 예시에서도 박스들을 둘러싸고 있는 .wrapper가 가장 가까운 요소이지만, static 상태이므로 .wrapper에서 벗어나 body를 기준으로 배치되었다.
.wrapper에 relative를 부여한다면 (2) 블록은 가장 가까운 static이 아닌 요소, .wrapper을 기준으로 위치를 결정하게 된다.
fixed
fixed는 요소를 고정적으로 배치한다.
-
뷰포트를 기준으로 요소의 위치를 결정하고,
-
스크롤을 하더라도 뷰포트를 기준으로 한 위치에 고정된 채로 유지된다.
-
transform,perspective,filter속성이none이 아닌 조상이 있다면, 뷰포트가 아닌 해당 조상을 기준으로 위치를 결정한다.
sticky
sticky는 특정 지점까지는 relative처럼 동작하다가, 지정한 top 값에 도달하면 fixed처럼 요소를 고정 배치한다.
-
부모의 끝을 넘어서면 멈추게 되므로, 부모 컨테이너의 높이가 sticky가 따라오는 영역을 결정한다.
-
가장 가까운 스크롤이 가능한 부모 요소 (즉,
overflow: visible이 아닌 요소) 내에서만 따라다니고,
부모 컨테이너 없이sticky를 사용할 경우에는body를 기준으로 한다!
요렇게 오늘도 TIL을 써봤는데, 아직도! 가독성이 부족하다는걸 느낀다😂
어제보다 더 신경써서 나아지긴 했지만... 흠.🤔 아직 고민이 많다.
확실한건, 내가 학습하면서 깨닫는 점이나 꼭 기억하고 싶은 부분은 인용으로 처리하는게 더 좋은 것 같다.
지금까지는 이모지💡 달아놓고 나중에 이모지 검색해서 봐야지~ 하는 생각이었는데, 그냥 한 번에 눈에 띄는게 훨씬 깔끔한 듯!
💾 참고
