Css Position : 요소들을 배치시키기 위한 포지션 속성에 대해서 알아봅니다.

Описание к видео Css Position : 요소들을 배치시키기 위한 포지션 속성에 대해서 알아봅니다.

#css#stylesheet#스타일시트#position#포지션#absolute#fixed#sticky#relative

▶▶▶ Position(fixed/absolute/relative/static)
static : 블록요소의 기본속성으로 요소를 이동하거나 겹칠수 없어서 만드는 순서대로 배치된다.

relative : 원래의 위치를 기준으로 하여 left,right,top,bottom 속성으로 이동가능하다.

fixed : 브라우저 윈도우의 왼쪽 위를 기준으로 하는 절대좌표 방식이다.

absolute : left,right,top,bottom 속성으로 이동 할 수 있다. 다른 요소와 겹칠 수 있는 포지션이다. static 이외의 포지션이 설정된 첫번째 부모 요소에 따라 배치된다. 부모요소가 없으면 html을 기준으로 이동함.

sticky: relative 와 fixed의 성격을 둘 다 가지고 있다. 상대적인 위치에 있다가 브라우저가 스크롤되면 지정한 위치로 고정된다.


▶▶▶ Z-index
포지션 있는 박스들은 나중에 만들어진 것이 위로 올라간다.
이때 아래에 있는 박스를 겹침에서 위로 올리려면 z-index로 조정한다.
z-index는 포지션이 있어야 작동하며 비교우위의 값으로 지정하면 큰 값의 박스가 위로 올라간다.

Комментарии

Информация по комментариям в разработке

Похожие видео