it-swarm.com.de

Element außerhalb des Überlaufs anzeigen lassen: ausgeblendet

Dies versucht wahrscheinlich das Unmögliche, aber ich möchte ein Element außerhalb eines Elements anzeigen, das overflow: hidden Ist. Ich weiß, dass das keinen Sinn ergibt und die Dinge so funktionieren, wie sie sollten, aber ich wollte nur noch einmal überprüfen, ob es einen Weg gibt.

Am besten mit diesem Code beschrieben:

.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

28
Mike

Das overflow:hidden Definition wird alles in diesem Element verbergen, das über seine Grenzen hinausgeht.

Abhängig von Ihrer spezifischen Anwendung können Sie möglicherweise eine Struktur wie die folgende verwenden:

.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

24
showdev

bitte überprüfen Sie die folgende Geige, die ich erstellt habe: http://jsfiddle.net/NUNNf/12/

Sie sollten einen externen Container wie diesen hinzufügen:

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

und fügen Sie dann die Elemente hinzu.

Styling:

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

.container {
    position:relative;
}

.inner {
    position: relative;
}

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

Erstellen Sie ein zusätzliches äußeres Div mit relativer Position und legen Sie die absolute Position des Divs fest, das Sie außerhalb des versteckten Divs mit Überlauf verschieben möchten.

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}
<div class='container'>
    <div class='overflow-hid-div'>
        <div class='inner'>
            sup!
        </div>
    </div>
</div>

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/

4
JerryGoyal