Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andrew Hoskins
Andrew Hoskins
4,888 Points
Posted by Andrew Hoskins
Andrew Hoskins
4,888 Points

Can I have a fixed image above a set of changing images in a single div?

This task is above my knowledge level - I have found and copied some javascript code that allows me to do an automated slideshow of images within a div. I would like to be able to put a fixed image in the upper left corner of that div that is in front of the slide show images and does not change with them. If possible I would also like to put a selection of navigation choices in the top right of the same div.
My original thought was to have the images as background images, but I could not figure out how to get them to shuffle.

for the moment I have kept is simple with just three images shuffling.

<header>
      <script src="css/slideShow.js"></script>
      <section>      
        <div id="slideShowImages">
          <img src="img/multiethnicbusinessby-ambro.jpg" alt="Group of business people">
          <img src="img/cactussunset2.jpg" alt="Desert sunset pic">
          <img src="img/fortlowell.jpg" alt="Building">
        </div>     
      </section>
        <img src="img/basslogov2.jpg" alt="Bass & Associates' logo">
        <p>header and backgroung images go here</p>            
    </header>

I want the logo image to be fixed in the upper left portion of the header. I have not written the css portion of this yet. The slideshow works fine, just the logo image is below.

Thanks!

2 Answers

Chris Malcolm
Chris Malcolm
2,909 Points
Chris Malcolm
Chris Malcolm
2,909 Points

assuming header is your container/wrapper for the slideshow..try adding a class to your logo and then adding position: relative to header. Then position: absolute to the logo, which will reference the closest parents position: relative top + left position. Then we just say top:0, left:0. the z-index: will make sure it sits on the top of your sliding mages. if those sliding images have a z-index, just make sure the value (I put it at 10) is greater than theirs.

  <img src="img/basslogov2.jpg" alt="Bass & Associates' logo" class='logo'>

header{
  position: relative;
}
header .logo{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  margin: 20px;
}
Andrew Hoskins
Andrew Hoskins
4,888 Points
Andrew Hoskins
Andrew Hoskins
4,888 Points

Awesome, Thanks! I was missing the Z-index each time I tried it.