.parent {
width: 150px;
height: 150px;
background: #bcbcbc;
border: 1px solid #bcbcbc;
}
.static-box {
position: static;
background: #2E303D;
color: #e55c3c;
font-weight: bold;
text-align: center;
line-height: 150px;
/*기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 */
/*부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.*/
/*기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position 을 무력화하기 위해 사용될 수 있다.*/
/*좌표 프로퍼티(top, bottom, left, right)를 같이 사용할 수 없으며 사용할 경우에는 무시된다.*/
position: relative;
top: 50px; left: 50px;
background: #2E303D;
color: #e55c3c;
font-weight: bold;
text-align: center;
line-height: 150px;
/*기본 위치(static 으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 */
/*사용하여 위치를 이동시킨다. static 을 선언한 요소와 relative 를 선언한 요소의 차이점은 좌표 프로퍼티의 */
/*동작 여부뿐이며 그외는 동일하게 동작한다.*/
position: absolute;
height: 200px; width: 200px;
top: 50px; left: 50px;
color: #e55c3c;
font-weight: bold;
text-align: center;
background: #2E303D;
line-height: 200px;
/*부모요소 또는 가장 가까이 있는 조상요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)*/
/*만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로*/
/*위치가 결정된다.*/
/*만일 부모 또는 조상 요소가 static 인 경우, document body 를 기준으로 하여 좌표 프로퍼티대로 위치*/
/*따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소에 relative 를 정의하여야 한다.*/
/*이때 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. */
/*(이런 특성을 부유 또는 부유 객체라 한다)*/
/*absolute 선언 시, block 레벨 요소의 width 는 inline 요소와 같이 content 에 맞게 변화되므로 */
/*적절한 width 를 지정하여야 한다.*/
/*relative 프로퍼티는 기본 위치(static 으로 지정되었을 때의 위치)를 기준으로좌표 프로퍼티
(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 따라서 무조건 부모를 기준으로 위치하게 된다.*/
/*absolute 프로퍼티는 부모에 static 이외의 position 프로퍼티가 지정되어 있을 경우에만 부모를 기준으로
위치하게 된다. 만일 부모, 조상이 모두 static 프로퍼티인 경우, document body 를 기준으로 위치하게 된다.*/
/*따라서 absolute 프로퍼티 요소는 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다.*/
position: fixed;
/*부모 요소와 관계없이 브라우저의 viewport 를 기준으로 좌표프로퍼티(top, bottom, left, right)을
사용하여 위치를 이동시킨다.*/
/*스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.*/
/*fixed 프로퍼티 선언 시, block 요소의 width 는 inline 요소와 같이 content 에 맞게 변화되므로
적절한 width 를 지정하여야 한다.*/
z-index: 1000;
/*프로퍼티에 큰 숫자값일수록 화면 전면에 출력. position 프로퍼티가 static 이외인 요소에만 적용된다.*/
}
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
/*overflow 프로퍼티는 자식 요소가 부모 요소의 영역를 벗어났을 때 처리 방법을 정의한다.*/
/*프로퍼티값 Description*/
/*visible 영역을 벗어난 부분을 표시한다. (기본값)*/
/*hidden 영역을 벗어난 부분을 잘라내어 보이지 않게 한다.*/
/*scroll 영역을 벗어난 부분이 없어도 스크롤 표시한다.(현재 대부분 브라우저는 auto 과 동일하게 작동한다)*/
/*auto 영역을 벗어난 부분이 있을때만 스크롤 표시한다.*/
div { overflow-y: auto; }
/*특정 방향으로만 스크롤을 표시하고자 할 때는 overflow-x 또는 overflow-y 프로퍼티를 사용한다.*/