position image absolutely to relative div - html

Question

Hi i feel really stupid for asking this, I have a site that I am working on and I am trying to position my profile picture absolutely to a div with a position of relative, however it doesn't work and the parent div does not wrap around the img. I'm sure it's a simple solution. Does the parent div have to have a height and width?
.parent {
position: relative;
}
#profilepic {
position: absolute;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="Images/Portraits%20circle.png" alt="profile picture"/>
</a>
</div>
I have not made the changes to the live site yet but the issue can be replicated in the browser
EDIT Thank you for the help

Answer 1

I assume, you got something wrong there about absolute positioning of HTML elements.
By setting an element to position:absolute; you take it entirely out of the document flow. Therefore there is no kind of automatic wrapping around of any parant element. The only connection to the actual parent Element is that you might have that one set to position:relative so the coordinates of your absolutely positioned elements depend on the position and dimension of its parent.
Your Idea only works properly here, if you know exactly the size of the final image. Then you could use something like that: https://jsfiddle.net/k98cLdvq/
CSS for this looks like:
.parent {
position: relative;
border:1px solid #c00;
width:200px;
height:200px;
}
#profilepic {
position: absolute;
border:1px solid #0c0;
width:100px;
height:100px;
left:50px;
top:50px;
box-sizing:border-box;
}
By adding the following you would get the effect you described:
a:hover #profilepic{
width:120px;
height:120px;
left:40px;
top:40px;
}

Answer 2

You are going to have to set the width and height of the container to provide a big enough base for the image to sit on top of (the container will not wrap around it as the absolutely positioned image is out of the document flow and instead sits on top) - ensure you have position:relative on the container and presuming you want the image at top left then top:0 and left:0 on the image. I presume you are positioning absolutely for layering? If not I would question using absolute positioning given the extra complication of making the underlying container big enough.

Answer 3

When positioning absolutely, you should remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
JS Fiddle
.parent {
position: relative;
background-color: green;
height: 150px;
width: 200px;
display: inline-block;
margin: 2px;
}
#profilepic {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s;
border: 2px solid navy;
}
#profilepic:hover {
width: 120%;
height: 115%;
z-index: 10;
transition: all 1s;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image1" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image2" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image3" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image4" alt="profile picture" />
</a>
</div>

Answer 4

When setting the position properties, you're best off setting top/bottom and left/right to get the results you expect. But you shouldn't, as you've said above,
set the top and bottom to 0
Instead, you should set either the top or the bottom property because setting both properties will cause them to contradict each other and the browser is likely to ignore both or pick one depending on the implementation.
Try this out: https://jsfiddle.net/9vbojg0w/
HTML
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/220px-Charles_Darwin_seated_crop.jpg"/>
</a>
</div>
CSS
/* background-color and width/height only for demonstration
* width/height can be removed if other elements cause the
* parent's size to expand
*/
.parent {
position: relative;
background-color:#ddd;
width:200px;
height:300px;
}
#profilepic {
position: absolute;
top:20px;
left:20px;
}