div devant tout avec z-index
J'ai ce carrousel de produits dans une page im bâtiment.
http://flytango.com.ar/test/home-publico.html
Lors du survol du produit, j'aimerais afficher un div avec du texte.
Im réaliser cela en utilisant...
.item_carrousel_home:hover + .item_carrousel_home_on {
display: block;
}
La div s'affiche (en vert), mais je veux qu'il soit offsetted 40px jusqu'. Donc, lorsque j'essaie "margin-top:-40px; il fait découper par le carrousel de la DIV.
J'ai essayé avec les z-index, mais je ne peux pas apporter la div en face de tout.
<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-->
Et le 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;
}
- Comme à plusieurs reprises demandé: s'il vous Plaît offrir un jsfiddle version de votre problème. jsfiddle.net vous pouvez coller les fragments de code pertinent à votre problème dans trois domaines: HTML, CSS et JavaScript (ou similaire). Veuillez coller de travail sur le code et ajouter le lien de votre post pour nous de vous aider 🙂
- Voici le jsfiddle jsfiddle.net/AbWYk je veux que le vert div être en face de everithing, et offsetted vers le haut
- C'est une question difficile. Si vous supprimez le
position: relative
de<div class="jcarousel-clip">
et c'est l'enfant<ul>
, le hover est positionné sans être découpés. Mais, évidemment, la position relative de la jcarousel éléments sont essentiels à sa fonction. - Yeap, c'est quoi me rend fou
Vous devez vous connecter pour publier un commentaire.
Devrait être:
}
) aprèsdisplay: block;
que tout le reste est écrasé par ailleurs.. Peut-être que c'est la question?Autant que je sache, vous devez utiliser:
position: absolute;
dans le code CSS pour utiliser la propriété z-index.
http://w3schools.com/css/css_positioning.asp
Vous ne pouvez pas donner à un enfant un z-index supérieur que celle du parent.
Peut-être que vous devez le mettre dans un supplément de div/span pour s'adapter à vos besoins?
EDIT:
Voir http://jsfiddle.net/AbWYk/3/
code:
display: none
(ou de le cacher derrière le reste du contenu avec un z-index négative). Si vous voulez montrer votre produit info (ou similaire), jeu dedisplay: block
ou augmenter le z-index.Depuis le HOLA div a
position: absolute
, vous pouvez utilisertop:-40
pour le déplacer vers le haut 40px. Je vous conseille aussi d'ajouterpointer-events:none;
pour arrêter le clignotement.CSS:
HTML: