positionでマイナスの値を指定した時にはみ出る

Question

◇ 不明点
positionの値にマイナスを指定した時に親要素からはみ出すのはなぜでしょうか？

<div id="hero">
		<div class="heroBox">
			<h2><img src="img/hero_ttl.png" width="" height="" alt=""></h2>
			<div class="pos_a img01"><img src="img/hero_img01.png"></div>
			<div class="pos_a img02"><img src="img/hero_img02.png"></div>
			<div class="pos_a img03"><img src="img/hero_img03.png"></div>
		</div> 

#hero {
  background-color: pnk;
  height: 100vh;
  width: 100%;
}

#hero .heroBox {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1080px;
}

#hero .heroBox .img01 {
  position:absolute;
  top: 32px;
  right: -6%;
  width: 25%;
}

上記の指定を行った際、「.img01」が、ウィンドウ幅を縮めた際に親の1080pxからはみ出てしまいます。
これはなぜなのでしょうか？

初歩の質問になるかと思いますが、ご教授いただけますと幸いです。

Answer 1

CSSのrightプロパティは、要素の水平方向の位置指定に用います。
https://developer.mozilla.org/ja/docs/Web/CSS/right

正の値（ex.) right: 20px;）なら右端から左側に向かって20px、負の値（ex.) right: -20px;）なら右端から右側に向かって20pxの位置に配置されます。
div.img01のwidthに相対値が指定されているので分かりにくいですが、例えば

#hero .heroBox .img01 {
  width: 150px;
  height: 150px;
}
#hero .heroBox .img01 img {
  display: block;
}

を追加してみてください。
ウィンドウ幅を縮めなくても、親要素の1080pxからはみ出すはずです。