The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Image Float between responsive environments

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #207348

    I am trying to learn how to float an image over the top of another image and figured as long as I set position:absolute on each they would stay in the same position regardless of screen resolution changes or viewing from a computer vs mobile device.

    I was clearly wrong. Here is my code which on my computer is perfect in any resolution as long as you don’t go WAY WAY up in resolution Ctrl/+++++++++++++++ but is fine and both images stay in the same stop in decreasing resolution. (although on codepen the positioning is not what I have on my screen)

    But when I view the page on my Android, the image of the bear is obviously in a different place.

    I’m guessing all of this is happening because my WordPress theme is responsive? Can someone suggest alternate code or reading material on how to achieve what I am trying to achieve?


    Using the same image for both images (on Codepen)? Typo “wigg.png” ISO “wig.png”


    Position: Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.