<a> not clickable inside <li> in parallax.js

Question

I'm using the parallax.js (http://wagerfield.github.io/parallax/) script to animate some elements on my page, here:

http://harbourcityseo.com/responsive/seo/.

When I place text outside of the < ul > tags, links work as normal. But they become... not clickable when nested inside the tags that set the parallax layers.

The text floating on the top of the page is the text I'm trying to troubleshoot (it's nested inside a parallax layer, it's just not positioned.)

<section role="main">
    <ul id="scene" 
        data-invert-x="true" 
        data-calibrate-x="false"
        data-limit-x="0"
        data-limit-y="10"
        class="scene">
    <li class="layer" data-depth="0.1"></li>
    <li class="layer" data-depth="0.2"></li>
    <li class="layer" data-depth="0.1"></li>
    <li class="layer" data-depth="0.3"></li>            
    <li class="layer" data-depth="0.5">
            <p>Like <a href="#" class="myButton">this</a>. Bacon <a href="http://www.google.com">ipsum dolor sit amet corn sourdough</a> multigrain brioche, rye scone biscuit naan tortilla potato bun muffin bagel focaccia croissant. Muffin bun sourdough tortilla bagel scone. Cracker wholegrain matzo banana sourdough bagel ciabatta muffin multigrain lavash panettone olive white garlic potato. Croissant wholegrain potato quick boule scone sourdough ciabatta cracker panettone naan bun roll. Ciabatta panettone pita scone rye.</p>          
            </li>
    <li class="layer" data-depth="0.1"></li>
    <li class="layer" data-depth="0"></li>
    </ul> 
 </section>

Answer 1

Use z-index for this

.layer 
{ 
   z-index: 100; 
}