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

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

Лучше всего описывается с помощью этого кода:

.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>

Ответ 1

Определение 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>

Ответ 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>

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