Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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