CSS3 position

네모를 내가 원하는 위치로 옮기는 방법

방법1
빨간 네모를 중앙에 두는 방법  (position: absolute; 사용)

	저 빨간 네모를 브라우저의 가운데에 둘려고 position: absolute; left: 50%; top: 50%; 를 했는데 가운데로 안온다
	그 이유는 검은 네모를 브라우저라고 생각하고 화면을 나누면 저 마우스쪽에 있는 모서리가 기준이 되서 left 50% top 50% 위치로 가기 때문에 정가운데로 가지 않는다 그럼 이걸 가운데로 보내는 방법은? 지금 저 상태에서 빨간 네모의 위치를 왼쪽으로 반 위로 반 옮기면 중앙으로 간다!
	지금 빨간 네모의 크기는  10+100+10 으로 가로 세로 120이다 가로세로 크기가 120인 네모를 가운데로 옮길려면  왼쪽으로 60 위로 60만큼 가면되는데 left, top에 50%를 이미 선언했기 때문에 -를 넣으면 안된다 그래서 margin을 사용한다 margin은 양수면 밀어내는데? 음수면 당긴다. 그래서 left, top으로 -60을 주면 네모가 가운데로 옮긴다.
원하는 요소를 position:absolute; 를 사용해서 브라우저 가운데로 오려고 한다면, 이동하고자 하는 요소릐 가로, 세로 사이즈의 반의 크기만큼 margin을 활용해서 -값을 준다

 

2번째 방법

빨간박스만 위치를 옮기는 방법(position: relative 사용)

	margin: -20px 0 0 0;을 주면 빨간 네모와 아래에 있는게 전부 올라간다 position: relative를 사용해본다.
	절대좌표인 position: relative를 사용하고 빨간 네모인 div를 옮긴다
	top: -20px를 줘서 빨간 박스만 위로 옮긴다. 이렇게 position: relative사용해 절대 좌표를 이용할 수 있다.

 

3번째

	abc중 제일 높은 , 부모인 a한테 position : relative;를 주니까 a 하위에 있는 b,c의 위치들이 브라우저가 아닌 a에 기준이 되어서 움직인다
	거기에 또 b에도 position : relative;를 주면 이제 c의 부모는 b가 되어서 b를 기준으로 위치하게 된다
	위에는 a의 position : relative; b의 position : relative; c의 position : absolute;이고 아래에는 a의 position : relative; b의 position : absolute; c의 position : absolute;이다 지금은 두개의 차이는 없다. 똑같다 relative만 부모좌표의 역할을 하는게 아니라 absolute도 부모의 역할을 한다. 그냥 가장 가까이에 있는 상위의 position을 따라간다.

 

 

---