Mam rodzic div z wysokości 0 i div dziecka w, ale na górze przy użyciu Z-index. Chcę, aby ten element potomny div został kliknięty, aby rozwinąć wysokość elementu nadrzędnego div. Działa naprawdę dobrze, ale wewnętrzny div znika za pozostałymi div równolegle do rodzica div i po zakończeniu animacji pokazuje go ponownie na górze. Więc w zasadzie podczas animacji dziecko ukrywa się za innymi sekcjami. Oto mój kod:

    <!-- Seccion on top of animated div -->
    <section class="backgroundBlack">
        <div class"indexContacto">
        <p>lorem ipsum other stuff here</p>       
        </div>
    </section>
    <!-- Contact Section -->

    <hr class="hrBlackToGrey" />

    <!-- Redes Sociales -->
    <section id="seccionGrid" class="colorGrey seccionGridOn">

            <div id="hex4" class="hex hex-4">
                <div class="inner">
                        <h5>Síguenos a trevés de redes sociales</h5>
                </div>  
                <div class="corner-1"></div>
                <div class="corner-2"></div>        
            </div>
    </section>
    <!-- Redes Sociales -->

    <hr class="hrGreyToBlack" />

    <!-- Footer -->
    <section class="sectionBlack">
        <div id="footer">
        <p>lorem ipsum stuff</p>
    </div>
    </section>

Oto mój JS:

<!-- Scripts Header -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<!-- Move Hexes Around -->
<script>
    $(function() {
        $("#hex4").click(function() {
            <!--$("#hex1").toggleClass('hex-1-Off', 1000);-->
            $("#seccionGrid").toggleClass('seccionGridOff', 1000);
            return false;
        });
    });
</script>

A oto mój css:

#seccionGrid{
    position: relative;
}

.seccionGridOn {
    padding: 0px;
    margin: 0px;
    height:0px;
    overflow: visible;
}

.seccionGridOff{
    height:500px;
}

.hex {
    width:150px;
    height:86px;
    background-repeat: no-repeat;
    background-position: 50% 50%;           
    -webkit-background-size: auto 173px;                            
    -moz-background-size: auto 173px;                           
    -ms-background-size: auto 173px;                            
    -o-background-size: auto 173px;                         
    position: absolute;
    margin: 0px;
    left: 50%;
    margin-left: -75px;
    margin-top: -43px;
    text-align:center;
    z-index: 5;
    overflow: visible;
}

    .hex.hex-gap {
        margin-left: 86px;
    }

    .hex a {
        display:block;
        width: 100%;
        height:100%;
        text-indent:-9999em;
        position:absolute;
        top:0;
        left:0;
    }

    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;                                
        z-index:-2;                     
        overflow:hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;         
        backface-visibility: hidden;            
    }

    .hex .corner-1 {
        z-index:-1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .hex .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    .hex .corner-1:before,
    .hex .corner-2:before {
        width: 173px;
        height: 173px;
      content: '';
      position: absolute;
      background: inherit;
      top:0;
      left: 0;
      z-index: 1;
      background: inherit;
      background-repeat:no-repeat;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden; 
        backface-visibility: hidden;                  
    }           


    .hex .corner-1:before {
        -webkit-transform: rotate(-60deg) translate(-87px, 0px);
        -moz-transform: rotate(-60deg) translate(-87px, 0px);
        -ms-transform: rotate(-60deg) translate(-87px, 0px);
        -o-transform: rotate(-60deg) translate(-87px, 0px);
        transform: rotate(-60deg) translate(-87px, 0px);    
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }           

    .hex .corner-2:before {
        -webkit-transform: rotate(60deg) translate(-48px, -11px);
        -moz-transform: rotate(60deg) translate(-48px, -11px);
        -ms-transform: rotate(60deg) translate(-48px, -11px);
        -o-transform: rotate(60deg) translate(-48px, -11px);
        transform: rotate(60deg) translate(-48px, -11px);   
        bottom:0;
    }       



    .hex .inner {       
        color:#eee;
    }

    .hex h4 {
        font-family: 'Josefin Sans', sans-serif;        
        margin:0;           
    }

    .hex h5 {
        font-color: #333;
        font-family: 'Josefin Sans', sans-serif;        
        margin:0;
        font-size: 20px;            
    }

    .hex hr {
        border:0;
        border-top:1px solid #eee;
        width:60%;
        margin:15px auto;
    }

    .hex p {
        font-size:16px;
        font-family: 'Kotta One', serif;
        width:80%;
        margin:0 auto;
    }


    .hex.hex-4 {
        background: #ffb400;
    }


.hex-1-Off {
    opacity: 0;
    margin-top: 86px;
    margin-left: 86px;
}

.hexCenter {
    position: absolute;
    top: 50%;

}

Jakieś pomysły, jak utrzymać mój heks na górze?

FIDDLE DO DEMONTOWANIA PROBLEMU:http://jsfiddle.net/xQVjq/

: EDIT: Na wypadek, gdyby ktoś chciał to zrobić bez usuwania div z sekcji, byłem w stanie utrzymać div na górze podczas animacji używając tego:

.css („overflow”, „visible”)

zaraz po klasie przełączania ...

Mam nadzieję, że to pomoże komuś. :EDYTOWAĆ: