[HTML&CSS] 04. 레이아웃 포지셔닝 - position

position

static

요소를 일반적인  문서 흐름에 배치 

top, right, bottom, left, z-index 속성이 아무런 영향 X

 

 

float

 

기준점

원래 있던 위치를 기준점에서 이동

 

문서의 시작점을 기준점으로 하여 이동 
absolute를 줄 경우 width를 지정하지 않으면 폭은 content 크기만큼 크기를 잡음 

 

 

visibility

.hidden {
	visibility: hidden;
}

 

 

 

 

z-index

position 속성이 static이 아닌 요소와 그 자손 요소의 Z축 순서를 지정

<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	border: 3px dotted gray;
}

.absolute-box {
	width: 100px;
	height: 100px;
	position: absolute;
}

.yellow {
	background-color: yellow;
	z-index: 1000; /* position이 static이면 적용 안 됨 */
	
}

.orange {
	background-color: orange;
	left: 100px;
	top: 100px;
	z-index: 100; /* position이 static이면 적용 안 됨 */
}

.green {
	background-color: green;
	left: 150px;
	top: 150px;
	z-index: 500; /* position이 static이면 적용 안 됨 */
	
	
}

.blue {
	background-color: blue;
	left: 180px;
	top: 120px;
	z-index: 10; /* position이 static이면 적용 안 됨 */
}
</style>

초록색을 앞으로 빼고 싶다면?? satic이면 안 됨 

z-index 를 이용하여 숫자가 크면 클 수록 위로 치고 올라온다.

 

 

 

clip

요소의 어느 부분이 보이는지를 정의한다. position이 absolute, fixed 만 가능

.img {
	position: absolute;
	top: 80px;
	left: 420px;
	clip: rect(20px, 220px, 220px, 20px);  /* 450 *  300 이미지 */
	/* top, right, botto, left */
}

 

columns

.box1 {
	columns: 3; /* 3단 */
	margin: 30px;
}

.box2 {
	columns: 200px; /* 최소 크기 지정 */
	margin: 30px;
}

.box3 {
	columns: 200px 5; /* 단 최소 단 수  */
	margin: 30px;
}