margin为负值引起的层级问题

<div class="wrap">
	<div class="A">
		<img src="/a">
	</div>
	<div class="B"></div>
</div>
<style>
	.wrap {
		width: 100%;
		height: 100%;
	}
	
	.A {
	    width: 100%;
	    height: auto;
	    .bgImg {
	      width: 100%;
	      height: 100%;
	      display: block; // 为了去除图片间隙
	    }
	  }

	.B{
	    width: 90%;
	    height: auto;
	    margin: 0 auto;
	    border-radius: 0.3rem;
	    background: red;
	    margin-top: -1rem;
	    // 下面两行起作用
	    // 方法一：
	    position: relative;
	    // 方法二：
	    display: inline-block; // 会使margin: 0 auto;失效
	  }
</style>