CSS position
CSS position속성
CSS position 속성은 문서상 요소의 위치를 지정하는 속성으로
relative : 자기자신을 기준으로 top, bottom, right, left 의 값에 따라 적용되며 다른 요소에는 영향을 주지 않는다.
absolute : 일반적인 문서 흐름에서 제외하고 조상 요소에 대한 상대적 위치에 대해 배치한다. relative와 같이 값을 지정할 수 있다.
fixed : 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
sticky : 가장 가까운, 스크롤 되는 조상과 컨테이닝 블록을 기준으로 오프셋을 적용한다.
배치유형
위치지정 : position값이 static 이 아닌 모든요소 중 하나인 값
상대 위치지정 : position값이 relative 인 요소
절대 위치지정 : position값이 absolute 또는 fixed 인 요소
끈끈한 위치지정 : position값이 static 인 요소
오프셋
top : 상단 값
bottom : 하단 값
right : 우측 값
left : 좌측 값
margin : 여백 값
.container{
width: 500px;
height: 350px;
background-color: #333;
position: relative;
}
.item{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
container 의 위, 아래의 높이를 계산하고 객체(item)의 크기가 제공되었을 때 margin : auto; 에 의해 위아래의 중앙 값에 수직정렬 한다.
container 의 좌, 우의 넓이를 계산하고 객체(item)의 크기가 제공되었을 때 margin : auto; 에 의해 좌우의 중앙 값에 수평정렬 한다.