네거티브 마진 (negative margin)

마진을 반대로 사용하는 개념이다. 브라우저에게 기준점을 속이는 원리로 동작하며 방법은 마진값을 음수로 주는 것이다.

우리나라는 글을 쓰는 기준이 왼쪽 상단부터 시작하기 때문에 우리가 작성하는 웹문서의 모든 기준들도 왼쪽 상단부터 시작한다.

따라서, margin-top과 margin-left는 요소들의 기본 기준점에서 시작되므로 음수값으로 시작점을 속이는 결과가 되어 해당 요소가 음수값만큼 움직인다.

margin-right, margin-bottom은 뒤에 요소의 시작기준점과 맞물리기 때문에 뒤에 요소가 영향을 받아서 움직인다.

그러나 이런 얘기는 width가 고정값으로 주어졌을 때의 상황이며, auto라면 얘기가 달라진다.

width가 auto인 상황에서는 이동이 아니라 크기가 커지는 개념으로 적용된다.

auto는 부모의 크기만큼 할당되므로, 시작점이 속여지면 속여진 곳부터 시작되어 부모의 크기 끝점까지 적용이 되는 것이고

끝점이 속여지면 부모 크기보다 빨리 끝났다고 인식하여 width값을 그만큼 더 할당한다.

또한, 위의 마크업에 inline요소와 아래 마크업의 block요소가 negative magin으로 인해 서로 겹치게되면 inline요소가 더 위에 올라오기 때문에 이를 해결하기 위해서는 position값을 주고 z-index로 임의로 레이어 인덱스값을 조절해주어야 한다.