position 속성

CSS의 position 프로퍼티를 사용하여 html 코드와 상관없이 어느 위치에나 요소를 그릴 수 있다.

position의 value 종류

• static(*거의 사용 안 함)
• relative
• absolute
• fixed

position: relative;    
position: absolute;
position: fixed;

position:relative; -> 이 자체로는 의미가 없고 움직이지 않는다!top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다!

position: absolute; -> 절대적인 위치에 둘 수 있다! 특정 부모에 대해 절대적으로 움직이는데 부모 중 position 값이 relative, fixed, absolute 가 있으면 그 부모에 대해 절대적으로 움직이게 된다.
일반적으로는 기준이 될 부모에게 relative 값을 부여한다.

position: fixed; -> 뷰포트에 상대적으로 위치하므로 페이지 스크롤 중에도 항상 같은 위치에 유지된다. 일반적으로 공백을 남기지 않는다.

display 속성

웹페이지 상에서 요소들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호배치되는지를 결정한다.

display의 value 종류

• inline
  -> 전후 줄바꿈 없이 한 줄에 나란히 배치. ** width와 height 속성을 지정해도 무시되고 margin과 padding 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다..

  <span></span> 
  <a></a>

• inline-block
  -> inline과 마찬가지로 한 줄에 나란히 배치되는데 width, height, margin, padding 속성이 모두 반영된다.

<button></button>
<input>
<select>

• block
  -> inline과 다르게 전후 줄바꿈이 나타난다.

  <h1></h1>
  <div></div>
  <p></p>