CODEWITHSUNDEEP
css
gramblestown
gramblestown

Reputation: 273

Placing multiple images in the same position

The Goal

I'm practicing writing my own simple JavaScript slideshow plugin, and the intended method is to have all of the images -- all of which are the same size -- in the same location on the screen (so all having the same x and y values), but alter their z-indexes to shuffle them in front of or behind each other as necessary, cycling through each of them. The JavaScript is working well so far, but I'm not able to get the images to all layer on top of each other on the page -- they just stack, from the top of their container downward, one per line.

What I've Got

This is a simplified version of the relevant portion of my HTML:

<section>
  <div class="images">
    <img src="1">
    <img src="2">
    <img src="3">
  </div>
</section>

And the CSS

.images {
  height: 15em;
  margin: 0 auto;
  overflow: hidden;
  width: 20em;
}

As you can see, it's not too complex. I'm at a loss as to where to go from here, though. The only way I've been able to get the images to layer the way I want is to apply position: absolute; and top: 0; to the images, but that also throws them outside of their div, and then applying that to the div itself causes the whole layout to go into chaos. So if anyone has any advice, I'd greatly appreciate it! :)

Upvotes: 4

Views: 9220

Answers (3)

alexej_d
alexej_d

Reputation: 448

You need to apply position: relative to the div. That way the images use their parent div as a reference.

Upvotes: 1

j08691
j08691

Reputation: 207881

Add position:relative to your .images class. Absolutely positioned elements are positioned with respect to their closest positioned ancestor element.

Upvotes: 4

Brian A. Henning
Brian A. Henning

Reputation: 1511

One option would be to use the JavaScript to modify the display and visibility CSS attributes to show and hide the images.

visibility: hidden means the element is not visible, but it still takes up space in the page flow.

display: none means the element takes up no space in the page flow.

I've seen browsers behave oddly when display is none but visibility is hidden. I've found it's best to switch both.

For the image you want to be visible, set display: block and visibility: visible

Upvotes: 0

Related Questions