position 속성
- HTML 태그의 위치 설정을 변경할 때 사용한다.
| 키워드 | 설명 |
| static | 위에서 아래 순서로 배치 |
| relative | 초기 위치 상태에서 상하좌우로 위치를 이동 |
| absolute | 절대 위치 좌표를 설정 |
| fixed | 화면을 기준으로 절대 위치 좌표를 설정 |
- absolute의 기준은 부모요소에서 position이 relative 되어 있는 곳이다.
- 기준이 될 부모요소는 height 속성을 적용해야 한다.
- 너비,높이가 100px인 상자 3개를 만들고 부모요소에 position:relative 값을 준 후, 2번 상자에 position:absolute를 주면
아래 그림처럼 바뀌게 된다.
- 2번과 3번이 겹쳐서 잘 확인이 안되기 때문에 3번 상자의 크기를 150px로 바꿔보았다.
- 이처럼 3번 상자 위에 2번이 있는것 처럼 보이게 된다.
- 2번 상자를 top과 left에서 50px을 이동하게 되면 기준이 어디인지 확인할 수 있게 된다.
- 만약 box 클래스에 position:relative 인 경우 아래 그림처럼 나오게 된다.
- study 클래스에 position:relative 를 입력하게 되면 아래 그림처럼 바뀐다.
- 1번,2번,3번 상자를 순서대로 적고 position 값을 absolute로 준 후 위치를 이동시킨 모습이다.
아래 그림처럼 3번이 마지막으로 작성되어 위에 올라와있는 모습을 볼 수 있는데, 이것을 바꾸기 위해서는 z-index 속성을 사용하면 된다.
- z-index값이 더 큰 숫자인 경우 z축에서 더 위로 올라오게 되어 아래 그림처럼 box3이 밑으로 가고 box1이 위로 올라오게 된다.
