CSS) position: absolute;
1) position: absolute; 위치 상 부모 요소를 기준으로 배치 ※ position이 지정되어 있는 부모를 기준으로 배치한다. 예제를 봐야 알 수 있다. 1. position: absolute;만 2번 div에 적용한 경우 html 1 2 3 css .grand-parent { width: 400px; height: 300px; padding: 30px 100px 100px 30px; border: 4px dashed lightgray; } .parent { width: 400px; height: 300px; border: 4px dashed gray; } .child { width: 120px; height: 80px; background: tomato; border: 4px dashed ..
CSS) position, top, bottom, left, right
1) position 요소의 위치 지정 방법의 유형(기준)을 설정 ※ 기준이 있어야 배치를 할 수있다. 속성 값 값 의미 기본값 static 유형(기준) 없음 / 배치 불가능 static relative 요소 자신의 기준으로 배치 absolute 위치 상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 html css .parent { width: 400px; height: 300px; border: 4px dashed lightgray; position: relative; /* top: 50px; left: 100px; */ } .child { width: 150px; height: 100px; background: tomato; borde..