제수기 - 제발 수업내용을 기억해라

Position

position속성 : 요소의 위치를 어떻게 설정할지 결정하는 속성

static

static

• (기본값) 문서내 정의된대로 화면배치(위->아래, 좌->우)
• offset값 무시

위에서 아래, 왼쪽에서 오른쪽으로 배치하는 경향이 있다.

offset을 무시한다는 게 무슨 말일까?
현재 position: static 상태이기 때문에 left에 공간 몇 px을 넣어라 같은 요청이 다 무시된다.

relative

relative

• 문서내 정의된대로 화면배치(위->아래, 좌->우)
• offset값 적용

offset이 적용됐다.

absolute

absolute

• 가장 가까운 부모/조상요소(position:static이 아닌) 기준으로 offset 적용

position static이 아닌 부모를 찾아 떠난 셋째와 넷째

position static이 아닌 부모를 찾아서 body까지 간 ..

absolute 자식요소의 기준설정

class ="outer ~"에 설정해주면 이렇게 잘 들어온 걸 볼 수 있다. 겹치는 이미지를 할 때 absolute를 사용한다.

fixed

fixed

• 브라우져 viewport기준으로 offset적용(화면에 고정되어 있음)
  sticky
• relative처럼 작동하다, 특정 offset에 다다르면 fixed처럼 작동.

border-radius: 50%; 원형처리

viewport 기준으로 자리를 이동한다. left, top, botton, right 등..

여기는 챗봇이 자주 위치하는 자리다.

sticky

화면을 이동해도 글자가 고정되는 sticky

background 색상을 넣을 수도 있다.

z-index 설정을 해주지 않으면, sticky 위로 나타나는 내용이 있을 수 있다.

z-index

z-index 속성 z 축의 요소가 쌓이는데 순서를 지정.
선언 없음보다 있음이, 작은 수보다 큰 수가 높아서 화면 앞에 배치된다.

이렇게 z-index를 사용해서 순서를 바꿀 수 있다.