position 요소 배치하기
postion 속성
CSS에서 position 텍스트 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 정확하 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.
postion: static
position 속성을 별도로 지정하지 않으면 기본값인 static이 적용이 된다.
static 요소는 HTML 문서 상에 원래 있어야하는 위치에 배치가됩니다.
즉슨 top, letf, bottom, right 속성값은 static일 때 무시가 됩니다.
//
div:nth-of-type(2){
background: #43a047;
position: static;
top:100px;
right: 500px;
transform: scale(1.1);
}
tip
static인 상태에서도 transfrom: translate() 속성을 이용하면 위치 이동이 가능합니다.
div:nth-of-type(3){
background: gray;
position: static;
top:100px;
right: 500px;
transform: translate(30px, 30px);
}postion: relative
position 속성을 relative로 설정하게 되면,요소를 원래 위치에서 벗어나게 배치할 수 있습니다. top, bottom, left, right 속성을 이용하여 원래위치에서 위치 변환이 가능 합니다.
postion: absolute
position 속성이 absolute 일 때 해당 요소는 배치기준을 자신이 아닌 상위 요소에서 찾습니다. 상위 요소의 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준이 됩니다. 만약 해당 상위 요소에 static이 아닌 요소가 없다면, DOM 트리에 최상이에 있는 요소가 배치 기준이 됩니다.
position: absolute인 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 됩니다.
-요소와 겹치게 되어 z-index를 주어서 우선순위를 우로 두게함
.absolute{
position:absolute;
top: 180px;
background-color:red;
z-index:2;
}position: absolute 와 transition 을 사용한 버튼 만들기
postion: fixed
position 속성이 fixed 일 때 브라우저 전체화면(viewprot)가 배치 기준이 되어 고정된 위치에 배치 할 수 있게해줍니다.
postion: sticky
요소가 스크롤링될 때 나타나는 효과입니다. 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 값에 따라 위치를 조정합니다.
참조
