Programmers

1) 요소 쌓임 순서(Stack order) 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(z축) 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 샇임(값은 무관) 2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임 3. position속성의 값이 있고, z-index속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소)) position > z-index > HTML마지막코드 1. 기본적으로 마지막에 생성된 요소가 가장 위에 보인다. html 1 2 3 4 5 css .box-group { display: flex; } .box-group .box ..

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 ..

1) position: relatvie; 요소 자신의 기준으로 배치 html 1 2 3 css .box { width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative { position: relative; bottom: 40px; left: 30px; } 출력결과 ※ 파란색 점선의 네모박스가 자신의 기준 위치이고 이 위치는 1번 div로 부터 영향을 받는다. 그리고 3번 div로 영향을 준다. ▷ 느낌으로 보자면, 현재 보여지는 2번 di..

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..