Forums

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
    Posts
  • August 28, 2015 at 5:54 pm #207348
    ncmartech
    Participant

    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.

    http://codepen.io/anon/pen/LpPMVj (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?

    August 28, 2015 at 11:16 pm #207351
    Atelierbram
    Participant

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

    Anyway:

    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.

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