position 특징 - display 수정

absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. (static, relative, sticky랑 상관이 없다)

 

지정값	변화값
inline	block
inline-block	block
inline-table	block
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex/ position 속성 효과없음
inline-flex	inline-flex/ position 속성 효과 없음
그외	변화없음

 

 

position: absolute 및 position: fixed 사용했을때 block요소로 변경됨.

그러므로 inline요소로만 사용하려고 할때 주의해야 한다.

span{
  width: 100px;
  height: 100px;
  background: tomato;
  margin : 30px 0;
  position: absolute;
}