position
정적위치(static position) {position : static;}
아무런 영향주지 않는다 기본값이다
html
<body>
<h1>position의 속성확인</h1>
<div class="static"> 인라인블럭으로
정적위치 : position의 기본값
</div>
</body>
css
.static{
position: static;
background-color: aquamarine;
width: 200px;
height: 100px;
}
상대위치(relative postion) {position : relative; left: 30px;}
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
오프셋은 다른 요소에는 영향을 주지 않는다
html
<body>
<div class="relative">
상대위치 : 원래 가진 정적 위치의
값에서 이동한 위치
</div>
</body>
css
.relative{
position: relative;
left:335px;
background-color: aquamarine;
width: 100px;
height: 100px;
}
고정위치(fixed postion) {position : fixed; top:0; right:0;}
스크롤을 내려도 그위치 그대로 같이 이동한다
컨테이닝 블록을 기준으로 삼아 배치한다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
html
<body>
<div class="fix">
고정위치 : 브라우저 화면 상에서
고정된 위치
</div>
</body>
css
.fix{
position: fixed;
top: 10px;
right: 50px;
background-color: aquamarine;
width: 200px;
height: 100px;
}
절대위치(absolute postion) {position : absolute; top:50px; right: 0;}
값이 고정된 top과 left에서는 위치가 고정 /스크롤내려도 그자리그대로있음
브라우저의 크기에 따라서 bottom과 right는 위치가 변형
페이지 레이아웃에 공간도 배정하지 않는다 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다
html
<body>
<div class="absoulute">
절대위치 : 값이 고정된 top과 left에서는 위치가 고정 <br>
브라우저의 크기에 따라서 bottom과 right는 위치가 변형
</div>
</body>
css
.absoulute{
position: absolute;
right: 30px;
top: 200px;
background-color: aquamarine;
width: 200px;
height: 100px;
}
z-index속성
겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
스택의 순서는 양수나 음수 모두 설정할수 있으며, 크기가 클수록 앞쪽에 위치, 작을 수록 뒤쪽위치
static - 아무런 영향도 주지 않음
relative - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성
absolute - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성
fixed - 항상 새로운쌓임 맥락을 생성