[TIL] CSS 3: Display and Positioning

Positioning

1. Position

위치 속성

• Static 기본값.
• Relative
  위에 40px의 공간을 설정하면 아래로 40px 만큼 이동한다.

  position: relative;
  top: 40px;

• Absolute
  설정한 영역이 가장 상단에 나타난다.

  position: absolute;
  width: 100%;  

• Fixed
  스크롤을 내려도 위치가 고정된다.

2. Z-Index

영역이 겹칠 때 웹페이지의 앞/뒤에 나타날 영역을 정한다.

z-index값(정수)이 큰 영역이 값만큼 앞에 나타난다.

.box-top {
  background-color: Aquamarine;
  position: relative;
  z-index: 2;
}
.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

Display

1. Display

• {display: inline;}
  줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
  대표태그: span, a, strong, img, br, input, select, textarea, button

  • width, height, margin-top, margin-bottom 지정이 불가능 하다.
  • line-height로 상하 여백 지정만 가능하다.
  • 요소 뒤에 공백이 있는 경우, 4px가 자동 지정된다.

• {display: block;}
  항상 새로운 라인에서 시작한다. width, height, margind, padding 지정이 가능하다.
  대표태그: div, h1~h5, p, ol, ul, li, hr, table, form

• {display: inline-block;}
  Inline과 같이 한 줄에 표현되면서 너비 및 높이를 지정할 수 있다.

2. Float

• Float
  이미지와 텍스트가 함께 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만든 것이다. 왼쪽/오른쪽 정렬.
  {float: left;}

  clear속성 또는 overflow 속성을 같이 이용한다.

• Clear
  레이아웃이 겹치지 않도록 영역을 비운다. left, right, both, none
  clear: both;}