float:left와 float:right , position:relative와 position:absolute 정렬

float:left와 float:right 그리고 position:relative와 position:absolute을 통한 상하좌우 정렬

 

1. float

    float:left = 자식요소의 좌표값를 부모 요소의 x=0, y=0

    float:right = 자식요소의 좌표값을 부모 요소의 x=(부모요소의 넓이-자식요소의 넓이), y=0

 

2. position

    position:relative =  상위요소로 부터 자신의 상대위치를 지정

    position:absolute =  부모요소로 부터 자신의 절대위치를 지정

    position:fixed =  브라우저로 부터 자신의 절대위치를 지정(ie6 제외)

 

 <div style="width:200px;height:200px;background:lightblue;">0</div>
 <div style="width:200px;height:200px;border:1px solid #999999;position:relative;top:30px;left:30px;">
     <div style="float:left;width:30px;height:30px;background:lightgreen;">1</div>
     <div style="float:right;width:30px;height:30px;background:lightgreen;">2</div>
     <div style="clear:both;position:absolute;bottom:0px;left:0px;width:30px;height:30px;background:lightgreen;">3</div>
     <div style="clear:both;position:absolute;bottom:0px;right:0px;width:30px;height:30px;background:lightgreen;">4</div>
     <div style="position:absolute;top:50%;left:50%;width:30px;height:30px;margin-top:-15px;margin-left:-15px;background:gold;">5</div>
 </div>
 <div style="position:fixed;width:100px;height:100px;top:100px;right:0px;background:pink;">6</div>