Position fixed within position fixed

Child with position:fixed scrolls with parent.

HTML

<div class="container" style="height:1500px;">
    <div class="overlay-trigger">
      <b>Click here to open overlay</b></div>
      <p>Change the .overlay-slidedown class on the .overlay element to .overlay-fade to see the difference. On fade the position: fixed close button stays fixed. On slidedown it moves with the content.</p>
      
		</div><!-- /container -->
		
		<!-- open/close -->	
    <div class="overlay-close">x</div>
		<div class="overlay overlay-slidedown">
			
			<div class="overlay-content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare, nisi eu condimentum dapibus, magna tellus pulvinar lorem, in sodales ipsum velit et ex. In hac habitasse platea dictumst. Donec rhoncus odio diam, sit amet tincidunt dui mollis sed. Aliquam malesuada ligula sed tellus porttitor placerat. Nunc non ligula eget justo hendrerit fringilla. Aliquam nec lectus nulla. Nulla magna ligula, lacinia maximus sodales ac, vulputate at arcu. Vivamus urna augue, convallis eu ornare eu, faucibus sit amet augue. In quis augue ac orci aliquet semper. Nunc nec mattis neque. Vestibulum malesuada diam lorem, ac gravida eros dictum sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet egestas sapien. Ut congue faucibus nisi blandit accumsan. Suspendisse interdum lorem vehicula eleifend lobortis. Aliquam blandit ipsum non nunc pellentesque fringilla.
				Mauris lacus odio, porttitor non volutpat eu, aliquet a mauris. Pellentesque consequat ultrices metus sed ullamcorper. Duis feugiat orci turpis, eu interdum mauris tincidunt vel. Vivamus interdum, libero sed mattis posuere, diam odio tincidunt sapien, quis ullamcorper massa mi a urna. Maecenas vitae luctus odio. Nullam commodo imperdiet purus, in ornare tellus iaculis et. Proin hendrerit ac eros non ullamcorper.
				Donec sollicitudin lacus erat, eu imperdiet mi dignissim vitae. Suspendisse potenti. Duis auctor ac ex molestie pellentesque. Lorem ipsum...

CSS

/* Remove scrollbars and scrolling behind the overlay */
.noscroll {overflow:hidden;}
/* Overlay core */
.overlay {
	position:absolute;
	overflow-y:auto;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  right:0;
	background: rgba(153,204,51,0.9);
	z-index: 10;
  
}
/* Overlay "close button" */
.overlay-close {
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
  position:fixed;
	background-color: black;
	color: white;
	z-index: 11;
  cursor:pointer;
  text-align:center;
  display:none;
}
.overlay-content {
  position:relative;
  top:0;
  left:0;
  
	max-width: 400px;
  overflow:auto;
}
.overlay.open {
  
	/* Gets added when it's open & removed when it's closed. Nothing on it's own but used by the animation below */
  
}


/* Effects 1 */
.overlay-slidedown {
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
	visibility: visible;
	transform: translateY(0%);
	transition: transform 0.4s ease-in-out;
}
.overlay-fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-fade.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

JavaScript

var htmlBody = $('body');
	var oOverlay = $('.overlay');
	var oTrigger =	$('.overlay-trigger');
	var oClose = $('.overlay-close');
	
	oTrigger.click(function(){
		htmlBody.addClass('noscroll');
		oOverlay.addClass('open');
    oClose.css("display","block");
	})
	oClose.click(function(){
   oClose.css("display","none");
		oOverlay	.removeClass('open')
							.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
			$('body').removeClass('noscroll');
		}); 
	})