2014년 4월 27일 일요일

CSS position

position : 위치
요소를 배치할때 사용

static
- 요소 본래의 위치.
- top, right, bottom, left로 지정해도 위치가 변하지 않는다.

relative
- 상대배치
- 본래의 위치에서 상대적으로 이동되어 위치
- top, right, bottom, left로 지정
- 기준점은 top, left (top과 bottom값이 같이 있을경우 bottom값은 무시됨. left, right도 마찬가지.) 
- 길이나, 퍼센테이지, auto로 값지정.
- 마이너스 값도 가능.
<style type="text/css">
.divA {
 position:relative;
 width:100px;
 height:100px;
 background:#6CF;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divB {
 position:relative;
 width:100px;
 height:100px;
 background:#CFC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divC {
 position:relative;
 width:100px;
 height:100px;
 background:#FCC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
</style>

<div class="divA">relative 1</div>
<div class="divB">relative 2</div>
<div class="divC">relative 3</div>


결과

순차적으로 위치함.



absolute
- 절대위치
- 각각 다른 요소에 영향을 주지 않고 독립적 위치를 가짐.
- top, right, bottom, left로 지정
- 부모 요소에 relative, static가 있을 경우 부모요소를 기준으로 위치를 잡음.
- 기준점은 top, left (top과 bottom값이 같이 있을경우 bottom값은 무시됨. left, right도 마찬가지.) 
- 길이나, 퍼센테이지, auto로 값지정.
- 마이너스 값도 가능.
<style type="text/css">
.divA {
 position:relative;
 width:100px;
 height:100px;
 background:#6CF;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divB {
 position: absolute;
 top:20px;
 left:20px;
 width:100px;
 height:100px;
 background:#CFC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divC {
 position:relative;
 width:100px;
 height:100px;
 background:#FCC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
</style>

<div class="divA">relative 1</div>
<div class="divB">relative 2</div>
<div class="divC">relative 3</div>


결과

relative1 레이어 위로 relative2가 올라와 있는걸 확인할수 있다.
떠있는 상태




fixed
- 고정위치
- absolute와 같이 절대위츠를 가지면서 스크롤 등의 이동에도 영향을 받지않고 항상 같은 자리에 위치함.
- top, right, bottom, left로 지정.
- 부모 요소에 relative, static가 있을 경우 부모요소를 기준으로 위치를 잡음.
- 기준점은 top, left (top과 bottom값이 같이 있을경우 bottom값은 무시됨. left, right도 마찬가지.) 
- 길이나, 퍼센테이지, auto로 값지정.
- 마이너스 값도 가능.
<style type="text/css">
.divA {
 position:relative;
 width:100px;
 height:100px;
 background:#6CF;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divB {
 position: fixed;
 top:20px;
 left:120px;
 width:100px;
 height:100px;
 background:#CFC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
.divC {
 position:relative;
 width:100px;
 height:100px;
 background:#FCC;
 padding:20px;
 margin:10px;
 font-size:14px;
}
</style>

<div class="divA">relative 1</div>
<div class="divB">relative 2</div>
<div class="divC">relative 3</div>


결과



스크롤에 상관없이 항상 같은자리에 위치함.








작성자: 시간:
라벨: ,