position 심화

position : absolute
-> 직접 영역 지정하는 것.
position : relative
-> 지정된 프레임 안에서만 이동
근데 프레임이 작으면 벗어나 질 수도 있음.




.red{

    position: absolute;
    width :200px;
    height: 200px;
    background-color: red;
}
.yellow{

    position: absolute;
    width :200px;
    height: 200px;
    background-color: yellow;

}
.green{

    position: absolute;
    width :200px;
    height: 200px;
    background-color: green;

}


인 경우 빨강 위 노랑 위 그린으로 겹쳐짐.
브라우저 전체 기준 좌표를 지정해 줘야 함.

 

relative와 absolute 규칙

absolute를 relative로 지정한 프레임 안에 넣으면 absolute는 frame을 전체 body좌표로 인식.