CSS Display and Positioning

position / z-index / display / float / clear

*Position*
 @static : 기본값(지정할 필요x)
 
 @relative : 기본 위치 수정
  (top(아래), bottom(위), left(오른), right(왼) 으로도 값 지정해준다!
   --position: relative;
     top: 40px;--이런 식으로)
     
 @absolute : 페이지의 원래 위치와 상관없이 위치 지정 가능!
             가장 가까운 상위 엘리먼트를 기준으로 위치가 결정(static제외)
                
 @fixed : 페이지의 구체적인 해당 위치로 고정해놓기
         (스크롤하는 위치에 관계없이 해당 위치에 고정된 상태로 유지됨)
        
 *Z-index*
  두 개 이상의 박스가 서로 다른 위치에서 겹쳐서 내용을 읽기 어려울 때
 '뒤로' 또는 '앞으로' 표시되어야 하는지 제어!
  정수 값을 가지며 값에 따라 표시되어야하는 순서를 지시함.
  (position 속성이 적용된 엘리먼트에서만 작동됨)
  ex) .box-top{
      position: relative;
      z-index: 2;
      } 고
      .box-bottom{
      position: absolute;
      z-index: 1;
      } 이라면
      bottom박스 먼저 조정되고 top박스가 그 위에 위치!
      
  *Display*
   @inline : 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치!
    - <span>, <strong>, <em>, <a> 등이 있고
      width, height 속성은 지정해도 무시됨 ->
      해당 태그가 마크업하고 있는 콘텐츠의 크기만큼만 공간을 차지하도록 되어있기 때문!
      margin, padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영xx
  
   @block : 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄 차지,
            주변 콘텐츠와 동일한 줄에 표시x, 기본적으로 페이지의 전체 너비 채우지만!
            해당 width속성도 설정 가능 width, height, margin, padding 모두 반영 O
    - <div>, <p>, <h1> 등이 있다.
  
   @inline-block : inline 엘리먼트처럼 한 줄에 다른 엘리먼트들과 나란히 배치되지만!
                   width, height, margin, padding 속성의 상하 간격 지정 O
    - <button>, <select> 등이 있다.
  
  *Float*
   웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성.
   가능한 한 맨 왼쪽 또는 맨 오른쪽으로 엘리먼트를 이동하려는 경우 사용가능!
   반드시! width값을 가져야함!
   @left : 가능한 한 왼쪽으로 이동하거나 부동
  
   @right : 최대한 오른쪽으로 이동
  
  *Clear*
   페이지에서 엘리먼트가 서로 부딪혔을 때 엘리먼트가 작동하는 방식을 지정,
   이미지 주위로 글자가 따라 붙지 않게 하기 위해 (취소한다는 의미)
   @left : 왼쪽 편의 엘리먼트는 다른 엘리먼트들을 건드리지 않음
  
   @right : 오른쪽 편의 엘리먼트는 다른 엘리먼트들을 건드리지 않음
  
   @both : 모두 접촉하지 않음
  
   @none : 양쪽 모두 접촉 가능(기초값으로 clear를 설정하지 않은 것과 동일)