Make element align to absolute positioned element as if it was relative - html

Question

I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height

Answer 1

To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>

Answer 2

I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks

Answer 3

try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo

Answer 4

I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/