position:fix인 배너 bottom:0(모바일) -> top:0(데스크탑)으로 갈 때

모바일에서 하단에 위치한 배너

.elem{
	position:fixed;
	bottom:0;
	left:0;
}

 

 

미디어 쿼리를 써서

데스크 톱에서는 상단에 위치시키고 싶을 때

@media screen and (min-width:768px){
	.elem{
    	top:0;
    	bottom:auto;
    }
}

 

 

 

element를 배치시킬때

top과 bottom 둘 중 하나 + right과 left 둘 중 하나를 써서 배치시키는데

위에서는 bottom을 썼고 

아래 미디어 쿼리에서는 top을 써야할 때,

bottom을 풀어줘야한다.

이때 bottom:auto를 써주면 알아서 높이 설정 됨

(bottom:auto를 빼먹으면 경우에 따라 화면 전체가 배너로 뒤덮일 수도..)