Home/ Questions/Q 8710121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T04:32:34+00:00

I have a simple div example with two images one of which has absolute

  • 0

I have a simple div example with two images one of which has absolute positioning inside the div.

That is my HTML code:

<div style="position: relative;  display: inline; "  >             
<img src="http://www.iphones.ru/wp-content/uploads/2008/09/iphone-girl-10.jpg" / >             
<img style="position: absolute;  top: -400px; left: 100px; z-index: 10" width="32"   height="32"  src="http://4geo.ru/images/other/icon-18plus.png"/>         
</div>

Try the example http://jsfiddle.net/yQn7W/1/ – you should see the “18+” logo on the face of the girl.
It work’s fine on both Chrome and Firefox.

But when I make few more divs one after another it seems that Firefox looses HTML flow and leaves “18+” image (which has “position: absolute;” attribute) on the page in the wrong place.

Try the example http://jsfiddle.net/yQn7W/2/

That’s how it looks in the Chrome:

https://i.stack.imgur.com/3Vhqe.jpg

And that is what Firefox displays:

https://i.stack.imgur.com/qZ4Ee.jpg

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is either to width mismatch or because you haven’t properly clearfixed the container. Since there is no live version of the problem I can’t tell which is it, but if you clearfix the container and it doesn’t work, you will have to set fixed width for each div, and also set it to float and inline-block, like so:

    <div style="position: relative; float:left; display: inline-block; width:500px;" >

    • 0