Home/ Questions/Q 6834385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:06:19+00:00

I am wondering how to stack images that use a percentage value to determine

  • 0

I am wondering how to stack images that use a percentage value to determine size (in this case, 100%) on top of each other. If they had a set pixel width/height, I would be able to simply adjust their location with position:relative to get them to occupy the same position on the screen. However, apparently I can’t do { position: relative; bottom: 100% } in order to move one under/over the other.

See what I mean with the full browser-width images here:

Warning: lots of large images will download
cmg.reef3.com

I want these all under/over each other so I can reveal them every few seconds with a fade out.

Any help is greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to

    1. set position:absolute to images. This will make them stacked.
    2. Adjust their position with top:npx; and/or left:npx; and/or bottom:npx; attributes (n = number)
    3. set z-index:n to each image, where n = a number. Higher number will bring the image on top.
    4. jQuery-fadeOut the top most image and when fadeOut is finished, it’s z-index to the lowest to send it to bottom most.

    If you’re trying to make a slide show, there are many written scripts available. Something like these

    http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

    http://www.dynamicwp.net/articles-and-tutorials/top-20-jquery-slideshow-and-image-gallery-tutorials/

    • 0