Absolute positioned image not displaying correctly on mobile/iPhone - css

Question

I have an image that I want displayed over another image inside of a div. The div has padding and margins. I want to align the image to the top and left of the div without the padding of the div showing. The div is relative position and image is absolute position. This works correctly in all browsers on desktop but not on iPhone.
I have checked that all divs have a position assigned as relative.
<div class="aaa">
<div class="bbb ccc">
<img src="common/banner.png" width="365" height="200" class="ddd"/>
<img src="images/picture.jpg" width="350" height="233" />
<h3>Text</h3>
</div>
</div>
<!-- ---CSS FOLLOWS, EXTRA CSS REMOVED--- -->
.aaa {
position: relative;
width:100%;
margin:auto;
padding:15px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
flex-direction: row;
}
.ccc {
position: relative;
}
.bbb {
max-width:350px;
position:relative;
color:#FFF;
flex-grow: 1;
padding: 15px 15px 50px 15px;
margin:15px;
text-align:left;
overflow:hidden;
}
#media (max-width: 410px) {
.bbb {
position:relative;
width:90%;
margin:15px 0;
height:auto;
overflow:auto;
}
.bbb img{
position:relative;
width:100%;
height:auto;
}
.bbb a,
.bbb a:hover,
.bbb a:focus,
.bbb a:visited {
position:relative;
margin-top:30p
}
}
.bbb a,
.bbb a:hover,
.bbb a:focus,
.bbb a:visited {
display: inline-block;
padding: 5px 15px;
position: absolute;
bottom:10px;
left: 50%;
transform: translate(-50%, 0);
transition: background 0.2s linear, color 0.2s linear;
}
Image should be flush with top and left of div.

Answer 1

Your markup doesn't contain any link (<a>), yet, the only element in your CSS you applied position:absolute to is .bbb a (with various modifiers), but that doesn't apply to anything.
Let's go over the basics: in order to display 2 elements one on top of the other (which, admittedly, is what you want achieve), you need:
a parent with position:relative
one child without position or with position:relative (this will constitute the document flow: will fill and determine the size of the parent and, indirectly, will also size the other element).
another child with position:absolute; + top, left, width and height (alternatively you can replace width:100%;height:100% with bottom:0;right:0), which will thus map itself to the dimensions of the parent, which, in turn, takes its dimensions from the normal flow (which only contains the other child). This element, being absolutely positioned, is not part of normal flow.
relative-parent {
position: relative;
font-size: 3rem;
}
normal-child {
height: 180px;
background-color: red;
color: white;
}
absolute-child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
color: red;
/* hide absolute child */
opacity: 0;
border: 1px solid red;
transition: opacity .3s;
}
relative-parent:hover absolute-child {
/* show absolute child on parent hover */
opacity: 1;
}
relative-parent,
normal-child,
absolute-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* all indented rules are irrelevant
I basically added them to style the example */
<relative-parent>
<normal-child>Normal child</normal-child>
<absolute-child>Absolute child</absolute-child>
</relative-parent>
The above is the general principle. All the styling (unimportant) rules have been indented, so the ones I talked above remained prominent.
The entire construct takes its size from the size of the flow, which is the normally positioned child (in the example: height: 180px; width: 100%. If you change that element, you also change the parent and the other child).
It doesn't really matter what elements you use (they can be even custom elements, as I made them, provided you give them a block or flexbox level value for display). If you use <div> as parent and <img>s as children, you should give the one in parent flow display:block.
If you apply the above principle without any validation errors, it will work cross-browser/cross-device. It's CSS level 1.

Answer 2

I'm not sure to understand, why 2 pictures on a phone? I see the tags "a" in your CSS so I send you this.
<a href="#" id="name">
<img title="Hello" src="common/banner.png" onmouseover="this.src='images/picture.jpg'" onmouseout="this.src='common/banner.png'" />
</a>