CODEWITHSUNDEEP
htmlcsscss-positionabsolute
p-sara
p-sara

Reputation: 339

Absolute positioning of element in responsive header

I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.

#wrapper {
    position: relative;
    display: inline;
}
#questionMark {
    position:absolute;
    left:33%;
    top:-43%;
    max-width: 10%;
}

This is my fiddle: https://jsfiddle.net/8obzf2c8/2/

Upvotes: 1

Views: 1404

Answers (4)

Navnit
Navnit

Reputation: 327

This will make the image placed in the center and will also be responsive with all screen sizes.

#wrapper {
position: relative;
display: inline-block;
}

img{
 width: 100%;
 height: auto;
}

#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 10%;
}
<div id=wrapper>
  <img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
  <img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>

Hope this helps,

Upvotes: 1

Dekel
Dekel

Reputation: 62676

inline elements doesn't get the height of the elements inside them.
You should remove the display: inline from the #wrapper element.

#wrapper {
  position: relative;
  margin-top: 150px;
}
#questionMark {
  position:absolute;
  left:33%;
  top:-43%;
  max-width: 10%;
}
<div id=wrapper>
  <img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
  <img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>

I also set margin-top to make sure the question mark image is in the viewport.

Upvotes: 2

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

Use display:inline-block; instead of inline

#wrapper {
position: relative;
display: inline-block;
}
#questionMark {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}

Upvotes: 1

pr0gramista
pr0gramista

Reputation: 9048

Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.

Change display: inline; to display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird top: -43%; to fe. top: 43% as things will get more normal and predictable.

Upvotes: 1

Related Questions