Силовой элемент для отображения за пределами переполнения: скрытый

Question

Возможно, это попытка невозможного, но я хотел бы отобразить элемент вне элемента, который равен overflow: hidden. Я знаю, что это не имеет смысла, и все работает так, как должно, но просто хотел дважды проверить, есть ли способ.

Best описано с этим кодом:

.outer { 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 50px; 
 
    overflow: hidden; 
 
    height: 30px; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
} 
 

 
.show-up { 
 
    width: 100px; 
 
    height: 300px; 
 
    background: green; 
 
    position: absolute; 
 
    left: 20px; 
 
    overflow: visible; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div> 
 
    </div> 
 
</div>

View on JSFiddle

Answer 1

The overflow:hidden определение будет скрывать что-либо внутри этого элемента, который выходит за его пределы.

В зависимости от конкретного приложения, вы можете быть в состоянии использовать структуру, как это:

.container { 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 50px; 
 
    height: 30px; 
 
    width: 300px; 
 
    background: red; 
 
} 
 
.outer { 
 
    overflow: hidden; 
 
} 
 
.inner { 
 
    position: absolute; 
 
} 
 
.show-up { 
 
    width: 100px; 
 
    height: 300px; 
 
    background: green; 
 
    position: relative; 
 
    margin-left: 20px; 
 
}

<div class="container"> 
 
    <div class="outer"> 
 
    <div class="inner"></div> 
 
    </div> 
 
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div> 
 
</div>

View on JSFiddle

Answer 2

пожалуйста, проверьте следующее скрипку я создал: http://jsfiddle.net/NUNNf/12/

Вы должны добавить внешний контейнер, как например :

<div class="container"> 
<div class="outer"> 
    <div class="inner"> 

    </div> 
</div> 
<div class="show-up">this needs to show up ALL 300 pixels high of it</div> 

</div> 

, а затем добавить элементы в