Force Kind Element sichtbar außerhalb eines Überlaufs: versteckte Eltern

Question

Einzige Lösung, die ich fand, war eine position: fixed auf Element, das ich vollständig sehen möchte. Irgendwelche anderen Wahlen? (Ich möchte nicht 'cool-image' fixed). Hilfe oder Hinweis wäre toll. Auch, wenn jemand Lösung erklären kann - das noch besser

Fiddle wäre: JSFiddle

HTML

<div class="img-cont"> 
    <div id="slider"> 
    <ul> 
     <li class="slide"> 
     <img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" > 
     <div class="cool-image"></div> 
     </li> 
    </ul> 
    </div> 
</div> 

CSS

.img-cont{ 
    height: 270px; 
    position: relative; 
} 
#slider { 
    position: relative; 
    background: green; 
    overflow: hidden; 
    width: 440px; 
    height: 200px; 
} 
#slider ul{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#slider ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 440px; 
    height: 270px; 
    text-align: center; 
    line-height: 300px; 
} 
div.cool-image{ 
    background-color: white; 
    position: absolute; 
    border: 5px solid #EEEEEE; 
    width: 650px; 
    height: 350px; 
    z-index: 1; 
    display: inline-block; 
    background-repeat: no-repeat; 
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png); 
    margin-left: -40px; /* Just to product situation */ 

    display: inline-block; 
} 

Answer 1

Leider kann man nicht. Das untergeordnete Element kann nur innerhalb der Elternregion geändert werden, wenn die Position nicht auf fixed oder absolute gesetzt ist.

Wenn Sie nicht das Kind fixiert machen wollen, könnten Sie position:absolute; versuchen, die Eltern zu position: relative;

Like this set ...

.slide img { 
    position: absolute; 
    z-index: 2; 
} 
.slide { 
    position: relative; 
} 

Oder Sie das nur verstecken könnten versuchen, Überlauf auf 1 Richtung. Wie overflow-y:hidden; Oder overflow-x: hidden;