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
참조
Nov 11, 2023
Views 137