◾ position
1. position: fiexd;
→ 스크롤을 내려도 그자리에 있음
→ top, left, right, botton 프로퍼티 중 하나만 수정해도 겹쳐짐 // 더 이상 bolck , margin 신경쓰지 않게됨
2. position: static;
→ 레이아웃 박스를 처음 위치하는 곳에 둠
3. position: relative;
→ 엘리먼트가 처음 놓인 자리에서 조금씩만 상하좌우로 옮기고 싶을 때
→
position: relative;
top: -10px;
left: -10px;
4. position: absolute; (사용하려면 부모 relative 사용하기)
→ 상하좌우로 옮기고 싶을 때
→ body 맨 오른쪽, 아래 , 왼쪽으로 이동함
→ 가장 가까운 relative 부모를 기준으로 이동시켜줌
div {
width: 300px;
height: 300px;
background-color: antiquewhite;
position: relative;
}
.green{
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: -10px;
left: -10px;
}
'CSS 마스터하기 > CSS' 카테고리의 다른 글
[CSS] Transitions(전환) 마스터하기 (0) | 2024.04.05 |
---|---|
[CSS] color(:root) 마스터하기 (0) | 2024.04.05 |
[CSS] state 마스터하기 (0) | 2024.04.05 |
[CSS] grid 마스터 (0) | 2024.04.04 |
[CSS] flex 마스터 (1) | 2024.04.03 |