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

Can you use relative positioning with z-index and animated CSS?

I'm working on a website that has various themed boxes. I want the box to appear to "open" when hovered over (which is working great with some jQuery) and then for an animation to start where different things appear to pop out of the box. For example I want snowflakes to appear to float out of the Snow Days box onmouseenter, and for popcorn to appear to float out of the Movies box onmouseenter etc. Here's a link to my project: https://stormy-atoll-5906.herokuapp.com/shop

I'm having trouble figuring out how to use z-index with relative positioning. I was planning to position the snowflake image behind all the other images and then have it pop out onmouseenter. I'm using png images with no background so I thought this would be pretty easy.

Unfortunately the z-index property didn't work with relative positioning. I tried using absolute positioning using the z-index to layer the snowflake image below the box which worked, but then realized I'd have to redo the entire page since absolute positioning misaligned the images and text. I'm hoping to stick with relative positioning for the box images and figure out how to work with the z-index. When I tried to use relative positioning the snowflake image appeared below the box image, rather than under it.

Any thoughts or idea for how to achieve the desired effect would be greatly appreciated! I'm fine using absolute positioning if that's the correct way, I just don't want to do unnecessary work if there's an easier solve.

THANK YOU!

make sure all of the images have position:relative or z-index wont work on them. Images that are position static by default will not be affected by z-index.

3 Answers

Jacqueline,

You definitely can use position: relative with z-index. Here is a link to the CSS specification:

http://www.w3.org/wiki/CSS/Properties/z-index

You might need to use a combination of position: relative and position: absolute to pull this off. If you set the parent element to position: relative and the hidden snowflake, etc. to position: absolute you will limit the scope of the absolute positioning. There is a very good discussion of this at 5:05 or so in this video:

http://css-tricks.com/video-screencasts/40-how-z-index-works/

I hope this helps.

Nathan

Matthew thanks for your reply. I think you're right, but I haven't been able to get it to work - probably because of a syntax issue specific to Ruby on Rails.

It seems like I'm not using the relative style properly with the embedded ruby. I created a class for the div that contained the image and added the relative property to that class. Unfortunately the snowflake image still appears below rather than behind the box.

Would be awesome if someone who knows a little ruby on rails might be able to help point me in the right direction where I can find the correct syntax to get this to work - probably by putting the relative positioning inside the erb <%= here? %>

This is what I have in my HTML.erb file for the entire top row of boxes. I'm just trying to get the snow days box to work first with the flakes.png image appear behind the open box.

<div class="col-md-4">
    <div class="wrap">
      <div class="closed-snowdays"><%= link_to image_tag("snowdays_closed.png"), snowdays_path %></div>
      <div class="open-snowdays"><%= link_to image_tag("snowdays_open.png"), snowdays_path %></div>
      <div class="flakes">
        <%= image_tag("flakes.png") %></div>
      <h2 ><%= link_to "Snow Days",   snowdays_path %></h2>
      <h3>Winter Cheer Box ~ January</h3>
      <p class="homepage">essentials for staying warm & cozy<br>while enjoying the winter<br>$50</p>
    </div>
  </div>

the CSS for the first row of boxes

.wrap div {
  position: relative;
  top: 0%;
  left: 0%;

}

.open-snowdays, .open-xoxo, .open-movies {
  display: none;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 50;
}

.flakes {
  position: relative;
  z-index: 5;
  top: 0%;
  left: 0%;
}

the custom.js.coffee that switches from a closed image of the box to the open box

$(document).on "page:change", ->
  $(".closed-snowdays").mouseenter ->
    $(".open-snowdays").show()
    $(".closed-snowdays").hide()
    $(this).hide()
    return

  $(".open-snowdays").mouseout ->
    $(".closed-snowdays").show()
    $(".open-snowdays").hide()
    $(this).hide()
    return

  $(".closed-xoxo").mouseenter ->
    $(".open-xoxo").show()
    $(".closed-xoxo").hide()
    $(this).hide()
    return

  $(".open-xoxo").mouseout ->
    $(".closed-xoxo").show()
    $(".open-xoxo").hide()
    $(this).hide()
    return

  $(".closed-movies").mouseenter ->
    $(".open-movies").show()
    $(".closed-movies").hide()
    $(this).hide()
    return

  $(".open-movies").mouseout ->
    $(".closed-movies").show()
    $(".open-movies").hide()
    $(this).hide()
    return

The CSS Tricks Video was very informative and helped me to understand the solve - thanks!

Below is the code that ended up working in case anyone else has a similar issue. I used position:relative for the wrap and then position:absolute for the snowflake image.

HTML.erb

<div class="col-md-4">
    <div class="wrap">
      <div class="closed-snowdays"><%= link_to image_tag("snowdays_closed.png"), snowdays_path %></div>
      <div class="open-snowdays"><%= link_to image_tag("snowdays_open.png"), snowdays_path %></div>
      <div id="flakes">
        <%= image_tag("flakes.png") %></div>
      <h2 ><%= link_to "Snow Days",   snowdays_path %></h2>
      <h3>Winter Cheer Box ~ January</h3>
      <p class="homepage">essentials for staying warm & cozy<br>while enjoying the winter<br>$50</p>
    </div>
  </div>

The CSS

.wrap div {
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 100;

}

#flakes {
  position: absolute;
  z-index: 5;
  top: 5%;
  left: 20%;
}

Now I just need to figure out how to add animation to the snowflakes but I think there's a treehouse video for that ;)