css 포지션속성
Position 속성 : relative & absolute
html의 요소의 위치값을 주려면 아래와 같이 position 속성이 필요하다.
.parent {
position: relative;
}
.child {
position: absolute;
top : 0;
left: 0;
right: 0;
bottom: 0;
}
자식요소의 위치를 부모요소 기준으로 위치를 변경하고 싶을때,
중요한건 부모요소에 relative를 주고 자식요소에 relative를 줘야한다는 것.
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child{
background-color: dodgerblue;
width: 100px;
height: 100px;
}
예시로 이와 같은 html을 하나 생성했다.
여기서 저 파랑네모를 우측하단으로 붙이고 싶다면?
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child{
position: absolute;
background-color: dodgerblue;
width: 100px;
height: 100px;
bottom: 0;
right: 0;
}
부모요소에 relative, 자식요소에 absolute를 주고,
bottom과 right에 각각 0값을 주면
자식요소가 부모요소의 범위 안에서 아래와 오른쪽 끝으로 붙게된다.
조금 응용해서, 저 파랑 네모를 부모요소 박스 내 '정중앙'에 위치시키고 싶다면?
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child{
position: absolute;
background-color: dodgerblue;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
여기서 top, left는 알겠는데..transform속성은 갑자기 뭐지?
transform 속성
얘는 변형을 시키는 속성이고 그 중 translate는 (x,y) 값대로 이동시키는 속성이다.
알겠는데, 왜 transform이 추가로 필요하냐..?
위에서 .parent의 좌표는 좌측상단 꼭지점을 기준으로 한다.
그래서 단순히 top, left를 50%씩 줬을때는 자식요소가 저 주황색 위치에 가게된다.
그래서 여기서 자식요소 크기의 절반만큼 위로 -x축으로 50% -y축으로 50% 이동(주황화살표)해야 정중앙에 배치된다.
같은 원리로 저 자식요소를 부모요소 밖으로 보낼수도 있다.
Author And Source
이 문제에 관하여(css 포지션속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@taero30/css-포지션속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)