Position:abolute사용시 넓이 상속문제 / inset / 화면중앙위치

1.Position:abolute사용시 넓이와 높이 ( width & height ) 상속문제

넓이를 width:100%로 만들고 abolute를 지정하니 넓이 100%가 적용이 안되었다

이 문제의 원인은 position: absolute 속성이 적용된 엘리먼트의 width: 100%가 부모 요소의 너비를 기준으로 결정되는 것이 아니라,

가장 가까운 위치 지정된(absolute, relative, fixed, 또는 sticky) 조상 요소의 너비를 기준으로 결정된다는 것입니다.

만약 position 속성을 주고 싶은데 부모의 width를 퍼센트로 가져오고 싶다면 relative를 부여하면 된다.

2.inset

position사용시 top right bottom left의 사용을 간략하게 할수있게 해준다

예제

inset(top right bottom left)
inset: 10px 30px 50px 70px;

3. absolute사용해서 화면 정중앙에 요소를 위치시키는법

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

tailwindcss에서 가운데정렬시

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

참조

abolute사용시 부모의 width,height값을 참조하지 않는다

inset에 대해서

화면정중앙에맞추기