Overflow Hidden für div innerhalb einer div

Habe ich einen äußeren div-und innen, ich habe ein Bild und ein weiteres div. Nun, das äußere div eine bestimmte Breite und Höhe und hat eine overflow: hidden; Jetzt mein Bild funktioniert, was bedeutet, dass, obwohl es ist größer als das div ist es nicht überlaufen.

Das problem, das ich habe, ist mit den anderen div, das innerhalb des äußeren div. Das innere div über das Bild, das ich habe. Aber es immer noch nicht zeigen. Aber nachdem ich positioniert, um absolute. Es funktionierte einwandfrei.

Danach bin ich positioniert-außerhalb der Grenzen des äußeren div. Jetzt, da ich den überlauf des äußeren div versteckt, sollte es nicht zu zeigen, richtig? Doch der innere div-shows. So, hier ist, was ich möchte, gelöst.

  • Warum nicht das innere div-Element zeigt zunächst, und warum habe ich dem div die Eigenschaft von position:absolute;?

  • Warum ist meine innere div anzeigen, die noch außerhalb der Grenzen meines äußeren div-auch wenn meine äußere div hat die Eigenschaft overflow zu hidden.

  • Wie Verstecke ich meine innere div, wenn es nicht innerhalb des äußeren div. Nun, beachten Sie, dass ich nicht wollen, dass der innere div-tatsächlich verstecken. Ich will ihn nicht sehen, es sei denn, es ist in meinem äußeren div.

Hier ist mein source-code für Verweis:

  • Die css-Eigenschaft des äußeren div:

    .banner {
    width: 250px;
    height: 500px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

  • Die css-Eigenschaft des inneren div:

    div.info {
     position: absolute;
     width: 250px;
     height: 500px;
     top: 0px;
     opacity: 0.70;
     -webkit-transition: -webkit-transform 300ms;
}

Hier ist ein link zu einem jsfiddle http://jsfiddle.net/jMX3n/2/

  • haben Sie eine Geige replizieren dein problem?
  • geben fiddle, das ist besser.
  • also wir erstellen eine Beispiel-Seite, um zu sehen, wie der code arbeitet alleine, ohne selbst zu sehen, was dein html ist? Wie nett von Ihnen um Hilfe zu bitten und nicht bieten Sie uns helfen, dir zu helfen.
  • Auch sollten Sie ein Turnschuh, obwohl.
  • jsfiddle.net es ist wirklich nicht kompliziert, du wirst sehen. Nicht registriert werden müssen.
  • Sie don ' Y haben, zu erstellen, eine Geige, aber Sie sollten alle code zu replizieren, das Problem. Es ist nur meist einfacher für alle, wenn eine Geige ist zusammen mit der Frage, für Probleme wie diese
  • jsfiddle.net/jMX3n/2 hier ist der link.

InformationsquelleAutor Adifyr | 2013-09-20
  1. 2

    Die Lösung gefunden. Ich löschte das äußere div mit der id #banner. Und dann die .banner Klasse, ich habe position: relative und dann verlagerte sich das div ein wenig. Anscheinend hatte ich mehrere div ' s ähnlich wie die inneren div-ich war die Beschreibung. In meinem .banner Klasse habe ich noch die Eigenschaft float:left;. Der überlauf funktioniert. Hier ist der neue code:

    Die div-Klasse:

    .banner {
    position: relative;
    top: 100px;
    left: 250px;
    width: 250px;
    height: 500px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

    Das innere div:

    div.info {
    position: absolute;
    width: 250px;
    height: 500px;
    top: 0px;
    left: -250px;
    opacity: 0.70;
    -webkit-transition: -webkit-transform 300ms;
}
    InformationsquelleAutor
  2. 1

    In der Geige, der mittlere div - (.banner) nicht positioniert werden, so dass die absolute Positionierung der innere div (.info) ist mit Bezug auf die äußere div (#banner), die position, aber nicht overflow:hidden.

    Deshalb, um zu verdecken, dass der überlauf, fügen Sie overflow:hidden an die äußerste div-Element als auch.

    InformationsquelleAutor Mr Lister
  3. 0

    AKTUALISIERT
    http://jsfiddle.net/Augustus06111993/Rkgfy/

    Da keine Geige, ich bin ein Schuss in der Dunkelheit..
    Da Sie verwendet absolute position überschreibt er Ihr überlauf-Methode, da

    Dies sagt dem browser, dass, was auch immer positioniert werden sollte
    entfernt werden aus dem normalen Fluss des Dokuments und wird in
    eine genaue Position auf der Seite. Es ist auch aus dem normalen Fluss
    der Dokument - es wird nicht beeinflussen, wie die Elemente vor oder nach der
    im HTML positioniert sind, auf der Web-Seite

    Ihrem äußeren div und dem inneren div haben die gleichen Abmessungen.. Versuchen Sie, die css der innere div-Element wie dieses, und sehen Sie Ihr Bild und div separat

    .info {
     width: 50%;
     height: 50%;
     float:left;
     opacity: 0.70;
}

.image {
     width:50%;
     height:50%;
}

.outer {
    width: 250px;
    height: 500px;
    overflow: hidden;
    margin-right: 20px;
    cursor: pointer;
}
    InformationsquelleAutor Augustus Francis
Schreibe einen Kommentar