positioning 포지셔닝의 주요 속성들>>>>>>
box-sizing : content-box; 콘텐츠 영역 기준
box-sizing:border-box; 테두리까지(박스전체)기준
float 속성
left
right
none
float:left
clear:both
float의 속성을 무효화시키는 속성
포지션속성 position :
static
요소를 문서의 흐름대로 배치되는것
올려간다거나 내려간다거나 특정조표값을줘서 움직인다거나 위아래로움직이는것을 전혀 할수가 없다.
relative
자연스럽게배치 고정되지않고 다른요소에의해바뀔수있다
relative속성은
left 나 top 을 줘서 요소의 위치를 움직일수있다
예)
.box2{
position:relative;
left:-50px;
top:30px;
width:300px;
background:#0094ff;
padding:20px;
}
absolute
문서에 자연스럽게 위치하는게 아니라
그냥 내가원하는 위치에 뚝 하고 위치시킬수있다
단, absolute를 사용하려면 부모나 조상 요소중에
position:relative인 요소가 있어야 absolute를 사용할수있다
absolute는 left , top , right , bottom 속성을 이용해 네 모서리에서 얼마나 떨어져 있는지 지정한다
예)
#wrap{
position:relative;
width:300px;
height:300px;
border:1px solid #ccc;
}
.box{
position:absolute;
width:50px;
height:50px;
background:#0094ff;
}
#cr1{
top:0;
left:0
}
#cr2{
top:0;
right:0
}
#cr3{
bottom:0;
left:0
}
#cr4{
bottom:0;
right:0
}
#cr5{
top:100px;
left:100px;
}
fixed
고정한다
문서의 흐름과는 상관없이 원하는 위치에 요소를 배치
브라우져창을 기준으로 해서 위치를 정함
브라우져 창 왼쪽 꼭지점 (0,0) 기준으로 좌표계산
브라우져 창 화면을 스크롤 하더라도 계속 같은 위치에 고정
예)
position:fixed;
top:5px;
right:5px;
width:50px;
height:50px;
background:#ff6a00;
visibility 속성
특정 요소를 화면에 보이거나 보이지 않게 설정하는 속성
visibility:
visible
(기본값)
hidden
감추고싶을때
예)
img{
margin:10px;
padding:5px;
border:1px soild black;
}
.invisible{
visibility:hidden;
}
이렇게 하면 두번째 속성을 히든으로 주면
두번쨰있던 자리가 감춰지는데 자리는 그대로차지하면서 남는다.
또한
감춰지는 요소중에
display:none 이라고해도 안보이게되는데
display:none은 자리가 아예 없어지게된다.
collapse
표의 행 열 그룹 등에서 지정하면
서로 겹치도록 조정합니다.
그 외의 영역에서 사용하면 hidden처럼 처리합니다
z-index
여러개의 요소를 쌓는 순서를 정하는 거다.
요소가 겹칠때가 있는데 그 겹칠 순서를 정하는게 z-index속성입니다.
그리고
z-index는 애니메이션 만들떄 아주 유용하게 쓰일수 있다.
z-index 값이 크면 값이 작은 요소보다 위에 쌓인다
z-index 값을 명시하지않으면 1부터 시작해서 1씩 커진다
예)
div#wrapper{
position:relative;
}
.b1{
z-index:1;
}
.b2{
z-index:3;
}
.b3{
z-index:1;
}
