ネガティブマージンについて

Question

<div class="container">
	<main>
		<div class="main-inner">
			<p class="main-title">Main</p>
		</div>
	</main>
	<aside class="sidebar">
		<div class="sidebar-inner">
			sidebar
		</div>
	</aside>
</div>

@media only screen and (min-width: 768px) {
	 .container {
		overflow: hidden;
	}
	main {
		float: left;
		width: 100%;
		margin-right: -340px; /* サイドバーの幅にマイナスをつける */
	}
	.main-inner {
		margin-right: 340px; 
	}
	.sidebar {
		float: right;
		width: 340px; 
	}

.sidebarのwidth: 340pxはサイドバーの幅を指定するためのものである。
.main-innerのmargin-right: 340pxはフロートとしたときにmainの横に並ぶsidebarのスペース確保のためだが、そのままではsidebarがmainの横に入り込めないということは理解できます。

そこでmargin-right: -340pxを指定することで実際に、sidebarがmainの横に入り込めるということなのでしょうが、このネガティブマージンの働きがよくわかりません。

どなたかご説明よろしくお願いいたします

Answer 1

よくわかりませんとは具体的にどうわからないのでしょうか？

marginにプラスの値を与えると余白ができますよね？
幅100pxの要素があったとして、余白を10px設定して、隣に要素を並べたとしたら、10pxの隙間があくわけです。
じゃあマイナス値を指定したらどうなるかというと、マイナスの余白ができます。
同じ例でいえば、隣の要素は10px重なります。
幅90pxであるかのように見えますが、実際は幅100pxの要素にとなりの要素が10px分だけ重なります。
「のりしろ」みたいなものです。