display: inline-block
display: none
visibility: hidden
인 경우이다. /* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
left : containing block(부모 영역)의 차지할 수 있는 영역 중 제일 좌측으로 떠오른다.
right : containing block(부모 영역)의 차지할 수 있는 영역 중 제일 우측으로 떠오른다.
position: static
이다. ◼ 요소를 normal flow 따라 배치하고, static경우의 위치를 기준으로 위치를 이동한다.
◼ top/bottom, right/left를 동시에 쓰는 경우 top과 left가 우선시된다.
◼ 요소를 normal flow에서 제거한다.
◼ 대신 가장 가까운 위치의 부모 요소의 position 값에 대해 상대적으로 배치한다.(주로 기준으로 삼고 싶은 블록 요소에 relative값을 준다.)
◼ 단, 부모요소가 위치 지정 요소가 없다면(staic이라면) 가장 상위 블록(body)을 기준으로 삼는다.
◼ width를 주지 않으면 가장 긴 요소를 기준으로 width가 결정된다.
◼ position: absolute를 주는 순간 block 요소가 된다.
◼ 뷰포트를 기준으로 삼아 위치가 고정된다.
◼ 요소를 normal flow에 따라 배치하고, 가장 가까운 스크롤 되는 부모 컨테이너를 기준으로 top, right, bottom, left의 값에 맞추어 fixed처럼 작동한다.
◼ 아래 코드에서는 스크롤되는 부모는 body이기 때문에 parent가 body에 대해 stiky작용을 한다.
/* 키워드 값 */
overflow: visible; - 넘치는 부분도 보인다.
overflow: hidden; - 넘치는 부분은 보이지 않는다.
overflow: scroll; - 스크롤을 하면 숨겨진 내용을 볼 수 있다.
overflow: auto; - 넘치면 자동으로 스크롤이 가능하도록 한다.
z-index: [integer]