Hacer que el elemento secundario aparezca fuera del elemento principal

Tengo un control deslizante en mi página que tiene una altura de 200px y tiene un desbordamiento oculto aplicado, dentro de este control deslizante hay elementos/imágenes que también son 200px. Cuando pasa el mouse sobre la id de la imagen para mostrar una información sobre herramientas arriba, mi único problema es que la información sobre herramientas está oculta debido a la regla de desbordamiento.Hacer que el elemento secundario aparezca fuera del elemento principal

Pensé que sería capaz de mostrar la información sobre herramientas dándole un índice z más alto, pero parece que no funcionó, ¿puede hacer que los elementos secundarios se rompan con sus padres?

Espero que esto tenga sentido.

En resumen mi estructura del código es similar a la de abajo

<div class="clip"> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
</div>

css ...

.clip { 
    height:200px; 
    overflow:hidden; 
    width:400px; 
} 

.tooltip { 
    font-weight:bold; 
    position: relative; 
} 

.tooltip a { 
    font-weight:bold; 
} 

.tooltip span { 
    margin-left: -999em; 
    position: absolute; 
} 

.tooltip:hover span { 
    background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent; 
    font-size: 11px; 
    height: 163px; 
    left: -100px; 
    margin-left: 0; 
    padding: 40px 30px 10px; 
    position: absolute; 
    top: -200px; 
    width: 310px; 
    z-index: 99; 
}

Fuente

2011-09-09 Liam

A lo mejor de mi conocimiento no se puede obtener un elemento hijo a romper las reglas de un padre como usted ha descrito. En su lugar, es posible que desee adjuntar la información sobre herramientas a un elemento de nivel superior, tales como document.body, y posicionarlo en contra de la posición absoluta de su imagen con un poco de javascript

<head> 
    <style> 
     #container { 
      position: relative; 
     } 
     #tooltip { 
      position: absolute; 
      display:none; 
      width: 200px; 
      height: 100px; 
      z-index: 99; 
      background-color: gold; 
      top: 0px; 
      left: 0px; 
     } 
     .clip { 
      height: 200px; 
      width: 400px; 
      overflow: hidden; 
      background-color: #C0C0C0; 
      position: absolute; 
      top: 50px; 
      left: 0px; 
     } 
     img { 
      height: 200px; 
      width: 100px; 
      background-color: #222222; 
     } 
    </style> 
</head> 
<script> 
    function imgover(img, tip) { 
     document.getElementById('tooltip').style.display = 'block'; 
     document.getElementById('tooltip').innerHTML = tip; 
     document.getElementById('tooltip').style.left = img.offsetLeft + 'px'; 
    } 

    function imgout() { 
     document.getElementById('tooltip').style.display = 'none'; 
    } 
</script> 
<body> 
<div id="container"> 
    <div id="tooltip">Tooltip Text</div> 
    <div class="clip"> 
     <img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/> 
    </div> 
</div> 
</body>

Fuente

2011-09-09 15:14:05

Cuando se aplica position: relative a un contenedor, hace que cualquier niño que tenga position: absolute se posicione absolutamente dentro del contenedor. Entonces, (0,0) será la esquina superior izquierda del contenedor, no de la ventana. Puede eliminar el position: relative del contenedor, pero luego deberá conocer la posición exacta x, y para colocar la información sobre herramientas.

Si está utilizando un diseño fluido, no sabrá dónde colocarlo. Entonces, en cambio, puede dejarlo con un posicionamiento relativo, y luego ajustarlo un poco con JavaScript. Algo como esto:

var tooltips = document.getElementsByClassName("tooltip"); 
var i; 
for (i = 0; i < tooltips.length; i++) { 
    tooltips[i].style.top = tooltips[i].parentNode.parentNode.style.top - 200; 
    tooltips[i].style.marginLeft = 0; // or display = "block" or whatever to show it 
}

Tenga en cuenta que este código no se ha probado. Tenga en cuenta también que getElementsByClassName no es compatible con navegadores antiguos, pero puede buscar una implementación manual si busca en la web.

Fuente

2011-09-09 15:59:26 ThatMatthew

Puede hacer el truco estableciendo la posición en fixed en su información sobre herramientas. Deberá establecer su posición en función de su elemento principal utilizando márgenes negativos.

Fuente

2014-06-18 06:14:26 micky2be

Esto funcionó para mí. –

Hacer que el elemento secundario aparezca fuera del elemento principal

Respuesta

Cuestiones relacionadas