Visible overflow hiding overlapping element

Question

I am attempting to use the overflow: visible; property in order to show a child element passing the parent element. My attempt is failing and the child element (the image) is getting cut off at the top of the parent element.

Does anyone see what I am doing wrong?

#blue {
  height: 150px;
  width: 100%;
  background: blue;
} 
#redBanner {
	width: 100%;
	height: 150px;
	background: #b22525;
	position: relative;
	overflow: visible;
}
#redBannerImg {
	position: absolute;
	bottom: 0;
	right: 10%;
	width: 40%;
	height: auto;
}

<section id="blue">
</section>
<section id="redBanner">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>

Answer 1

If you use top: 0;instead of bottom: 0; it works, but not sure if that brokes your design.

#redBanner {
	width: 100%;
	height: 150px;
	background: #b22525;
	position: relative;
	overflow: visible;
}
#redBannerImg {
	position: absolute;
	top: 0;
	right: 10%;
	width: 40%;
	height: auto;
}

<section id="redBanner">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>