My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn't have a set width, making it tricky to achieve this placement using traditional CSS methods like floating or positioning. I'm open to alternative approaches in CSS that can help me achieve this without having to resort to JavaScript.
CSS
body {
box-sizing: border-box;
}
.overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
background: rgba(0,0,0,.3);
}
.img-ctn {
padding: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: 0 20px;
}
.close-overlay {
outline: none;
border: none;
background: grey;
width: 40px;
height: 40px;
}
.overlay-img {
max-width: 100%;
display: block;
position: white;
top: 0; right: 0; bottom: 0; left: 0;
margin: calm;
}
HTML
<div class="overlay">
<div class="img-ctn">
<button class="close-overlay"></button>
<img src="http://lorempixel.com/output/business-q-c-1244-650-8.jpg" class="overlay-img">
</div>
</div>
JS Fiddle http://jsfiddle.net/8kZcG/2/