div davanti a tutti gli elementi con z-index

Ho questa giostra di prodotti in una pagina di chat edificio.

http://flytango.com.ar/test/home-publico.html

Quando si passa il prodotto, mi piacerebbe mostrare un div con il testo.

Im realizzare questo utilizzando…

.item_carrousel_home:hover + .item_carrousel_home_on {
display: block;
}

Div mostra (in verde), ma voglio che sia offsetted 40px up. Così, quando cerco “margin-top:-40px; viene tagliato fuori dalla giostra DIV.

Ho provato con z-index ma non posso portare il div di fronte a tutto ciò.

<div id="carrousel_home">

  <ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="#" class="item_carrousel_home"><img src="imagenes/cellactive.jpg"      alt="Cellactive" width="155" height="200" border="0" /><br />Nombre Producto<br />
en dos lineas</a><div class="item_carrousel_home_on">HOLA</div></li>
  </ul>

</div><!--fin del carrousel-->

E css

.item_carrousel_home:hover + .item_carrousel_home_on {
display: block;
.item_carrousel_home_on {
width:220px;
height:130px;
background-color:#00FF00;
color:#FFFFFF;
display:none;
position:absolute !important;
z-index:999999 !important;
margin:0px;
margin-left:20px;
margin-top:-40px !important;
}
  • Come ripetutamente richiesto: si Prega di offrire un jsfiddle versione del tuo problema. jsfiddle.net è possibile incollare i frammenti di codice rilevanti per il problema in tre campi: HTML, CSS e JavaScript (o simili). Si prega di incollare un codice funzionante ed aggiungere il link al tuo post per noi aiutarti 🙂
  • Qui è il jsfiddle jsfiddle.net/AbWYk voglio il verde div essere davanti a tutto, e offsetted verso l’alto
  • E ‘ una scelta difficile. Se si rimuove il position: relative da <div class="jcarousel-clip"> e bambino <ul>, il passaggio del mouse è posizionato senza essere tagliati. Ma, ovviamente, il posizionamento relativo della jcarousel elementi sono essenziali per la sua funzione.
  • Yeap, thats whats facendo diventare matto

 

4 Replies
  1. 0
    .item_carrousel_home:hover + .item_carrousel_home_on {

    Dovrebbe essere:

    .item_carrousel_home:hover, .item_carrousel_home_on {
    • Se lo faccio, il div non si presenta a tutti
    • Tuttavia si deve compilare una parentesi di chiusura ( } ) dopo display: block;, come tutto il resto viene sovrascritto altrimenti.. Forse è questo il problema?
    • Buon punto @StefanSurkamp!
    • btw: Se si utilizza la corretta sintassi di CSS e non mostra affatto (o non come previsto) si dovrebbe davvero offrire semplificato jsfiddle. Potrebbe aiutare entrambi.
    • io ho una parentesi di chiusura dopo il display:block; …
    • Forse si può creare un jsFiddle per rendere il problema più chiaro per noi.
    • Va bene, si potrebbe avere dimenticato di incollarlo nel codice di esempio di cui sopra. Ho proposto una modifica con aumento della formattazione e la parentesi di chiusura.
    • jsfiddle.net/AbWYk Grazie ragazzi 🙂
    • Basta sostituire il codice come ho detto, si risolverà il problema. Vedere questo: jsfiddle.net/AbWYk/1
    • io che per esempio y vedere il verde div load…non funziona
    • Sì, il verde div è quello che ha un alto z-index. O non mi fraintendere è?
    • Sì, ma io voglio che questo accada solo quando si passa il prodotto
    • Bene, siamo in grado di giocare a questo avanti e indietro per sempre… Se non offrono una versione più completa del tuo violino si deve accettare che non siamo in grado di aiutare in ogni sua parte e cerco di risolverlo da soli.
    • Im cercando di ottenere tutto il codice js (fiddle, ma io non funziona come dovrebbe a > flytango.com.ar/test/home-publico.html

  2. 0

    Non si può dare un bambino un z-index più alto di quello del padre.

    Forse devi metterlo in una div/span vestibilità esigenze?

    EDIT:

    Vedere http://jsfiddle.net/AbWYk/3/

    codice:

    .item_carrousel_home_on {
        width:220px;
        height:130px;
        background-color:#00FF00;
        color:#FFFFFF;
        display:none;
        position:absolute !important;
        z-index:999999 !important;
        margin:-80px 0 0 0;
    }
    • dove esattamente? grazie
    • Che davvero non importa. Si può solo mettere “da qualche parte”, impostare display: none (o nascondere dietro il resto del contenuto, con un negativo z-index). Se si desidera visualizzare le informazioni sui prodotti (o simili), impostare display: block o aumentare il z-index.
    • uomini dispiace, dovrete nudo con me, im non sicuro se im seguendo. Non sto solo facendo in questo momento?
    • Vedere la mia cura rispondere. Ho messo tutti i valori di margine in una riga. Essi sono trattati in senso orario (in alto – in basso a sinistra che a destra).
    • Funziona esiste! Ma vedo quello che sei cambiato!
    • Beh, bene, non è vero?
    • Opere su il violino, ma non nel sito

  3. 0

    Dal HOLA div ha position: absolute, è possibile utilizzare top:-40 spostarlo 40px. Vi consiglio inoltre di aggiungere pointer-events:none; per interrompere il flickering.

    CSS:

    @font-face {
        font-family:'Helvetica';
        src: url('fonts/helvetica2.eot');
        src: url('fonts/helvetica2.eot?#iefix') format('embedded-opentype'), url('fonts/helvetica2.woff') format('woff'), url('fonts/helvetica2.ttf') format('truetype'), url('fonts/helvetica2.svg#helvetica2') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    body {
        font-family: Arial Narrow, sans-serif;
        font-stretch: condensed;
        font-size:18px;
        color:#828282;
        font-weight:bold;
        background-image:url(imagenes/bg.jpg);
        background-repeat:repeat-x;
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #F6F6F6;
        text-align:center;
    }
    a:link {
        text-decoration: none;
        color:#666666;
    }
    a:visited {
        text-decoration: none;
        color:#666666;
    }
    a:hover {
        text-decoration: none;
        color:#000000;
        text-decoration:underline;
    }
    a:active {
        text-decoration: none;
        color:#666666;
    }
    /** COLORES **/
     .negro {
        color:#000000;
    }
    .gris {
        color:#CCCCCC;
    }
    .rojo {
        color:#ED1C2F;
    }
    /** **/
     #contenedor {
        width:940px;
        height:500px;
        margin:auto;
        position:relative;
    }
    #header {
        width:940px;
        height:147px;
        float:left;
        background-image:url(imagenes/shadow_940.png);
        background-repeat:no-repeat;
        background-position:center bottom;
        padding-bottom: 85px;
        position:relative;
        z-index:99999;
    }
    #barra_header {
        width:910px;
        height:23px;
        border:1px solid #CCC;
        border-top:0px;
        float:left;
        font-size:14px;
        font-style:normal;
        text-align: left;
        padding-left: 15px;
        padding-top: 5px;
        padding-right: 15px;
    }
    #idiomas_header {
        float:left;
    }
    .banderita_header {
        margin-right:7px;
    }
    #universo_prof_header {
        float:right;
        height: 28px;
        background-image: url(imagenes/flecha_header.jpg);
        background-repeat: no-repeat;
        background-position:56% 0%;
        margin-top:-5px;
        padding-top:5px;
    }
    #universo_prof_header a:link {
        font-style:normal;
        color:#828282;
    }
    .flecha_universo_prof_header {
        margin-left:10px;
        margin-right:10px;
        margin-top:8px;
    }
    .logo {
        margin-top:15px;
        float:left;
    }
    #menu-header {
        width:940px;
        float:left;
        position:absolute;
        left:-3px;
        top:97px;
        z-index:9999 !important;
    }
    #slider {
        width:940px;
        height:368px;
        float:left;
        padding:0px;
        margin:0px;
        left:0px;
        margin-top:-45px;
    }
    #destacados_home {
        font-family:'Helvetica', Arial Narrow;
        font-size:40px;
        text-shadow: 0px 3px #FFFFFF;
        font-weight:normal;
        font-style: normal;
        width:940px;
        height:50px;
        color:#808080;
        float:left;
        margin-top: 70px;
        background-image: url(imagenes/linea_destacados.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    #carrousel_home {
        width:940px;
        background-color:#FFFFFF;
        float:left;
        margin-top: 40px;
        border: 1px solid #CCC;
        margin-bottom: 50px;
        padding-bottom: 20px;
        padding-top: 10px;
    }
    .item_carrousel_home {
        width:155px;
        float:left;
        margin-left:10px;
        margin-right:10px;
        font-size: 19px;
        color: #4f4f4f;
        line-height: 19px;
    }
    .item_carrousel_home:hover {
        color:#FF0000;
        text-decoration:none;
    }
    .item_carrousel_home_on {
        width:220px;
        height:130px;
        background-color:#00FF00;
        color:#FFFFFF;
        display:none;
        position:absolute !important;
        z-index:999999 !important;
        margin:0px;
        margin-left:20px;
        top:-40px;
        pointer-events:none;
    }
    .item_carrousel_home:hover + .item_carrousel_home_on {
        display: block;
    }
    .jcarousel-skin-tango .jcarousel-container {
        background: #FFF;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl {
        direction: rtl;
    }
    .jcarousel-skin-tango .jcarousel-container-horizontal {
        width: 920px;
        height:240px;
        padding-left:15px;
    }
    .jcarousel-skin-tango .jcarousel-container-vertical {
        width: 75px;
        height: 245px;
        padding: 40px 20px;
    }
    .jcarousel-skin-tango .jcarousel-clip {
        overflow: hidden;
    }
    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: 920px;
        height: 275px;
    }
    .jcarousel-skin-tango .jcarousel-clip-vertical {
        width: 75px;
        height: 245px;
    }
    .jcarousel-skin-tango .jcarousel-item {
        width: 172px;
        height: 275px;
    }
    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left: 0;
        margin-right: 10px;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left: 10px;
        margin-right: 0;
    }
    .jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: 10px;
    }
    .jcarousel-skin-tango .jcarousel-item-placeholder {
        background: #fff;
        color: #000;
    }
    /**
     *  Horizontal Buttons
     */
     .jcarousel-skin-tango .jcarousel-next-horizontal {
        position: absolute;
        top: 100px;
        right: -50px;
        width: 32px;
        height: 50px;
        cursor: pointer;
        background: transparent url(../imagenes/next-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
        left: 5px;
        right: auto;
        background-image: url(../imagenes/prev-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        position: absolute;
        top: 100px;
        left: -48px;
        width: 32px;
        height: 50px;
        cursor: pointer;
        background: transparent url(../imagenes/prev-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
        left: auto;
        right: 5px;
        background-image: url(../imagenes/next-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }

    HTML:

    <div id="carrousel_home">
        <ul id="mycarousel" class="jcarousel-skin-tango">
            <li><a href="#" class="item_carrousel_home"><img src="imagenes/cellactive.jpg" alt="Cellactive" width="155" height="200" border="0" /><br />Nombre Producto<br />
    en dos lineas</a>
    
                <div class="item_carrousel_home_on">HOLA</div>
            </li>
        </ul>
    </div>
    <!--fin del carrousel-->

Lascia un commento