Skip to main content
Fragmento de código
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Código CSS

    ```
    #padre{
    border:solid 1px #2A1212;
    width: 550px;
    height: 500px;
    background-color: #D8E9F4;
    position: relative;
    }
    .ta{
    border:double 4px #2D2727;
    border-radius: 5px;
    width: 350px;
    height: 250px;
    position: absolute;
    }
    #tab1{
    background-color: #F40C0C;
    left: 20px;
    top: 20px;
    z-index: 1;
    }
    #tab2{
    background-color: #EC0CF4;
    left: 40px;
    top: 40px;
    z-index: 2;
    }
    #tab3{
    background-color: #2D0CF4;
    left: 60px;
    top: 60px;
    z-index: 3;
    }
    #tab4{
    background-color: #0CF1F4;
    left: 80px;
    top: 80px;
    z-index: 4;
    }
    #tab5{
    background-color: #0CF43D;
    left: 100px;
    top: 100px;
    z-index: 5;
    }
    #tab6{
    background-color: #F1F40C;
    left: 120px;
    top: 120px;
    z-index: 6;
    }
    ```

código JS $(document).ready(function() { $(".ta").click(function () { $(this).css({"z-index":"100","left":"140","top":"140"}); $(this).siblings().css({"z-index":"0","left":"","top":""}); }); });

código HTML

$(document).ready(function() {
        $(".ta").click(function () {
            $(this).css({"z-index":"100","left":"140","top":"140"});
            $(this).siblings().css({"z-index":"0","left":"","top":""});
        });
});
#padre{
        border:solid 1px #2A1212;
        width: 550px;
        height: 500px;
        background-color: #D8E9F4;
        position: relative;
}
.ta{
        border:double 4px #2D2727;
        border-radius: 5px;
        width: 350px;
        height: 250px;
        position: absolute;
}
#tab1{
        background-color: #F40C0C;
        left: 20px;
        top: 20px;
        z-index: 1;
}
#tab2{
        background-color: #EC0CF4;
        left: 40px;
        top: 40px;
        z-index: 2;
}
#tab3{
        background-color: #2D0CF4;
        left: 60px;
        top: 60px;
        z-index: 3;
}
#tab4{
        background-color: #0CF1F4;
        left: 80px;
        top: 80px;
        z-index: 4;
}
#tab5{
        background-color: #0CF43D;
        left: 100px;
        top: 100px;
        z-index: 5;
}
#tab6{
        background-color: #F1F40C;
        left: 120px;
        top: 120px;
        z-index: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre">
        <div id="tab1" class="ta"></div>
        <div id="tab2" class="ta"></div>
        <div id="tab3" class="ta"></div>
        <div id="tab4" class="ta"></div>
        <div id="tab5" class="ta"></div>
        <div id="tab6" class="ta"></div>
</div>
    ```
    <div id="padre">
    <div id="tab1" class="ta"></div>
    <div id="tab2" class="ta"></div>
    <div id="tab3" class="ta"></div>
    <div id="tab4" class="ta"></div>
    <div id="tab5" class="ta"></div>
    <div id="tab6" class="ta"></div>
    </div>
    ``` 
 

Código CSS

    ```
    #padre{
    border:solid 1px #2A1212;
    width: 550px;
    height: 500px;
    background-color: #D8E9F4;
    position: relative;
    }
    .ta{
    border:double 4px #2D2727;
    border-radius: 5px;
    width: 350px;
    height: 250px;
    position: absolute;
    }
    #tab1{
    background-color: #F40C0C;
    left: 20px;
    top: 20px;
    z-index: 1;
    }
    #tab2{
    background-color: #EC0CF4;
    left: 40px;
    top: 40px;
    z-index: 2;
    }
    #tab3{
    background-color: #2D0CF4;
    left: 60px;
    top: 60px;
    z-index: 3;
    }
    #tab4{
    background-color: #0CF1F4;
    left: 80px;
    top: 80px;
    z-index: 4;
    }
    #tab5{
    background-color: #0CF43D;
    left: 100px;
    top: 100px;
    z-index: 5;
    }
    #tab6{
    background-color: #F1F40C;
    left: 120px;
    top: 120px;
    z-index: 6;
    }
    ```

código JS $(document).ready(function() { $(".ta").click(function () { $(this).css({"z-index":"100","left":"140","top":"140"}); $(this).siblings().css({"z-index":"0","left":"","top":""}); }); });

código HTML

    ```
    <div id="padre">
    <div id="tab1" class="ta"></div>
    <div id="tab2" class="ta"></div>
    <div id="tab3" class="ta"></div>
    <div id="tab4" class="ta"></div>
    <div id="tab5" class="ta"></div>
    <div id="tab6" class="ta"></div>
    </div>
    ``` 

$(document).ready(function() {
        $(".ta").click(function () {
            $(this).css({"z-index":"100","left":"140","top":"140"});
            $(this).siblings().css({"z-index":"0","left":"","top":""});
        });
});
#padre{
        border:solid 1px #2A1212;
        width: 550px;
        height: 500px;
        background-color: #D8E9F4;
        position: relative;
}
.ta{
        border:double 4px #2D2727;
        border-radius: 5px;
        width: 350px;
        height: 250px;
        position: absolute;
}
#tab1{
        background-color: #F40C0C;
        left: 20px;
        top: 20px;
        z-index: 1;
}
#tab2{
        background-color: #EC0CF4;
        left: 40px;
        top: 40px;
        z-index: 2;
}
#tab3{
        background-color: #2D0CF4;
        left: 60px;
        top: 60px;
        z-index: 3;
}
#tab4{
        background-color: #0CF1F4;
        left: 80px;
        top: 80px;
        z-index: 4;
}
#tab5{
        background-color: #0CF43D;
        left: 100px;
        top: 100px;
        z-index: 5;
}
#tab6{
        background-color: #F1F40C;
        left: 120px;
        top: 120px;
        z-index: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre">
        <div id="tab1" class="ta"></div>
        <div id="tab2" class="ta"></div>
        <div id="tab3" class="ta"></div>
        <div id="tab4" class="ta"></div>
        <div id="tab5" class="ta"></div>
        <div id="tab6" class="ta"></div>
</div>
 

Origen Enlace
Jorge
  • 13
  • 3

Como lograr que al dar clic en una caja de una pila de 6 divs, se ubique encima y que la anterior ocupe su lugar

Estoy con un problema de 6 divs apilados, solapados pero desplazados hacia abajo y hacia la derecha de tal modo que me permite dar clic a cada uno de éllos. Lo que quiero es que al dar clic en cualquiera de estos, se desplace al frente; pero que el div anterior se mueva a ocupar su lugar.

He probado con un script de JQuery, pero no logro conseguirlo.

Aqui está el codigo que he probado:

Código CSS

    ```
    #padre{
    border:solid 1px #2A1212;
    width: 550px;
    height: 500px;
    background-color: #D8E9F4;
    position: relative;
    }
    .ta{
    border:double 4px #2D2727;
    border-radius: 5px;
    width: 350px;
    height: 250px;
    position: absolute;
    }
    #tab1{
    background-color: #F40C0C;
    left: 20px;
    top: 20px;
    z-index: 1;
    }
    #tab2{
    background-color: #EC0CF4;
    left: 40px;
    top: 40px;
    z-index: 2;
    }
    #tab3{
    background-color: #2D0CF4;
    left: 60px;
    top: 60px;
    z-index: 3;
    }
    #tab4{
    background-color: #0CF1F4;
    left: 80px;
    top: 80px;
    z-index: 4;
    }
    #tab5{
    background-color: #0CF43D;
    left: 100px;
    top: 100px;
    z-index: 5;
    }
    #tab6{
    background-color: #F1F40C;
    left: 120px;
    top: 120px;
    z-index: 6;
    }
    ```

código JS $(document).ready(function() { $(".ta").click(function () { $(this).css({"z-index":"100","left":"140","top":"140"}); $(this).siblings().css({"z-index":"0","left":"","top":""}); }); });

código HTML

    ```
    <div id="padre">
    <div id="tab1" class="ta"></div>
    <div id="tab2" class="ta"></div>
    <div id="tab3" class="ta"></div>
    <div id="tab4" class="ta"></div>
    <div id="tab5" class="ta"></div>
    <div id="tab6" class="ta"></div>
    </div>
    ```