postion 속성 / 23번 / 03-6(3)
postion : relative
float은 레이아웃 관점에서 자주 사용하는 속성
position은 좀 더 세분화해서 영역 안에서 자잘한 요소들의 좌표를 설정해 배치할 때 주로 쓰는 기능
position 은 부모의 위치를 기준으로 잡는 속성
float 속성을 이용할 때보다 섬세한 위치 조정이 가능하다.
postion : relative
left,
top,
bottom,
right,postion 속성과 방향 속성(left, right, top, bottom)은 보통 함께 쓰인다.
(방향 속성을 기준으로 얼만큼 떨어질지 정해준다)
MDN postion 속성에 대한 설명
- 기본 코드
- position : relative 속성 추가한 코드
원래 빨간색 바로 아래 위치했던 파란색 박스를 relative 속성을 통해 원래 위치를 기준으로 이동했다.
즉 relative 속성은 자기의(해당 요소)의 원래 위치를 기준으로 위치를 설정한다.
(아래 position : absolute 설명 마지막에 position : relative에 대한 설명이 더 있다.)
postion : absolute
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>//CSS
.wrap {
width: 600px;
border : 5px solid black;
margin: 50px auto;
}
//float 버그 해결
.wrap::after {
content : "";
display: block;
clear : both;
}
.wrap .left {
width: 300px;
height: 300px;
background-color: blue;
/*float: left;*/
}
.wrap .right {
width: 300px;
height: 300px;
background-color: red;
/*float: left;*/
}
.wrap .bottom {
width: 600px;
height: 100px;
background-color: green;
/* float: left; */
} 1. 기본
2.left, right 요소에 float : left 추가
left, right에만 float : left 속성을 적용하고, bottom 에는 적용하지 않았을 때는
마지막 bottom이 포함되어있지 않다.(부모가 bottom을 인식 못하는 상태)
즉 어떤 특정 영역(wrap) 안에서 float되는 요소가 하나라도 있으면 (현재는 left, right)
bottom은 float 속성이 필요 없음에도 float 속성을 적용해 주어야 부모 요소가 나머지 자식 요소(bottom)들을 인식하고 감싸준다.
(bottom은 float없이도 바닥을 깔아주려고 의도했었다.)
3. 모든 요소에 float : left 추가
left, right, bottom 모두 float : left 속성을 적용했을 때,
(실제로 bottom에 float : left 속성을 적용해 주어도 옆에 붙을 공간이 없어서 아래에 있다.)
1번, 2번, 3번 과정에 대한 codepen 실습
4. right 박스에 자식(노란 박스) 추가
<div class="wrap">
<div class="left"></div>
<div class="right">
<p class="box"></p> //추가
</div>
<div class="bottom"></div>
</div>//CSS
...
추가
.wrap .right .box {
width: 100px;
height: 100px;
background-color: yellow;
}
4-1 노란 박스의 위치 변경 : 빨간색 박스의 5시 방향 근처로
이때는 float : absolute 속성을 이용한다.
relative와 다른 점은 원래 자기 위치가 기준이 아니라, 부모 요소를 기준으로 위치를 설정한다.
다음과 같이 코드를 설정해 주자.
//CSS
...
.wrap .right .box {
width: 100px;
height: 100px;
background-color: yellow;
-------추가----------
position: absolute;
bottom: 40px;
right: 10px;
}
그런데, 예상과 다르게 빨간 박스를 벗어나 브라우저의 5시 방향 근처로 이동되었다.
position : absolute 속성은 화면에서 강제로 뜯어낸 뒤 지정된 위치에 살포시 얹어 놓는 느낌?으로 이해하면 된다.
그런데, 요소의 위치를 따지는 기준은 해당 요소의 부모 요소 중에서 position 속성이 있는 부모를 기준으로 따진다.
//CSS
.wrap { //전체를 감싸는 부모 박스
width: 600px;
border : 5px solid black;
margin: 50px auto;
}
.wrap::after {
content : "";
display: block;
clear : both;
}
.wrap .left {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
.wrap .right { //빨간 박스
width: 300px;
height: 300px;
background-color: red;
float: left;
}
.wrap .right .box { //노란 박스
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
bottom: 40px;
right: 10px;
}
.wrap .bottom {
width: 600px;
height: 100px;
background-color: green;
float: left;
}현재 .wrap .right .box (노란색 박스)의 부모는 .wrap .right (빨간 박스)이다.
그런데 .wrap .right (빨간 박스)에는 position 속성이 없다.
그러므로 한 단계 더 위의 부모를 찾아간다. (.wrap)
그런데 .wrap에도 position 속성이 설정되어 있지 않다.
이런식으로 부모 요소에 position 속성을 찾으며 쭉 올라간다.
이번 예제에서는 결과적으로 body가 기준이 되는 것이다. (즉 브라우저에 보이는 화면 전체가 기준)
만약, 애초에 원했던 빨간 박스 5시 방향으로 노란색 박스의 위치를 조정하고 싶다면,
.wrap .right (빨간 박스)에 position 속성을 설정해 주어야 한다.
position 속성의 값으로 absolute, relative 중 하나를 선택해야 한다.
그런데 absolute는 화면에서 강제로 뜯어내어 살포시 다른 위치에 얹는 느낌이다. 그리고 또한 이전에 자식의 position:absolute 설정때문에 부모에 position 속성을 설정하는 것인데, 부모에도 position:absolute를 해주면, 똑같은 작업을 위해 부모의 부모에 posision: absolute... 를 해주어야 한다.
그렇기 때문에 부모의 영역 안에서 상대적인 위치를 정하기 위해 부모에는 position:relative 속성을 정해준다.
우리가 원하고자 하는 위치는 부모(빨간 박스)가 기준이므로 빨간 박스에 position : relative를 설정해 주어야 한다.
위에서 relative 속성은 자신의 원래 위치를 기준으로 위치를 조정하는 속성이라고 설명했는데,
사실, (부모 요소의) relative 속성은 position : absolute 속성이 설정된 자식 요소의 바운더리(경계)를 설정하기 위한 용도로 더 많이 쓰인다.
posotion : relative 속성만 설정하고 좌표를 따로 설정하지 않으면, 아무런 변화, 영향은 없다. (기존 유지)
단지, position 속성만 갖고 있게 된다는 것이다.
즉 자식에서 position : absolute 속성이 필요한 경우, 부모에 position : relative 속성을 주기 위한 용도로 더 많이 쓴다는 것.
postion : fixed
-
position : relative 는 원래 자기 자신의 위치를 기준 (사실, 자식의 position : abosulute 속성을 위해 더 자주 쓰임)
-
position : absolute 는 부모 영역을 기준으로 절대적인 위치를 설정하기 위해 자주 쓰임
-
position : fixed 는 무조건 브라우저를 기준으로 위치를 설정한다.
부모에 relative, 자식에 fixed 위치 자체는 브라우저를 기준으로 잡아진게 맞음. 하지만 요소 자체는 부모에 종속되어있기 때문에 스크롤을 내려서 부모가 사라지면서 자식도 사라지는 것
자식에만 fixed : 브라우저를 기준으로 위치 설정
Author And Source
이 문제에 관하여(postion 속성 / 23번 / 03-6(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tpgus758/postion-속성-23번-03-63저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
