Absolute Position und Überlauf in CSS ausgeblendet

Ich habe overflow:hidden für einen Container festgelegt. Ich möchte die absolute Position für ein Element festlegen, das sich innerhalb des Containers befindet, so dass es außerhalb des Containers angezeigt wird. Überlauf ausgeblendet lässt es jedoch nicht angezeigt werden.Absolute Position und Überlauf in CSS ausgeblendet

Es ist wichtig für mich, die overflow:hidden für den Container zu verwenden, da ich viele Elemente im Container habe. Gibt es trotzdem, um es mit der overflow:hidden arbeiten zu lassen?

Das übergeordnete Element der wrap ist das body Tag und seine schwer zu entscheide Position entsprechend.

HTML:

<div class="wrap"> 
    <div class="box"> 
     <span>Left</span> 
     <div class="main"></div> 
    </div>  
</div>

CSS:

.wrap{ 
    width: 500px; 
    margin: 50px auto; 
    border: 1px solid green; 
    overflow: hidden; /*causes the problem */ 
} 

.box{ 
    position: relative 
} 

.main{ 
    width: 100px; 
    height: 100px; 
    background: green; 
} 

span{ 
    position: absolute; 
    left: -50px; 
}

Demo: http://jsfiddle.net/c55hS/

Quelle

2013-09-03 user1355300

Kurz gesagt, nein, es ist ohne Änderung Ihrer Markup nicht möglich. Siehe eine detaillierte Erklärung hier -> http://stackoverflow.com/questions/15438828/extending-position-absolute-div-outside-overflow-hidden-div – Xareyo

http://stackoverflow.com/questions/8837050/allow- specific-tag-to-override-overflowhidden Ich denke, du kannst nicht. –

Hat diese Frage geschrieben, bevor sie erkannt hat, dass sie bereits beantwortet wurde. Ich habe eine einfache Geige, die demonstriert, wie man das erreicht, dachte, ich würde teilen: http://codepen.io/tobek/pen/EGmxw – tobek

Ich glaube nicht ... Ich denke, Sie sollten nur Lege dein Element außerhalb des Containers ab. ..

Setzen Sie Ihr Element hier statt

<div class="wrap"> 
    <div class="box"> 
    <span>Left</span> 
    <div class="main"></div> 
    </div>  
</div>

JsFiddle

Quelle

2013-09-03 09:56:22 NessyString

Wie andere gesagt haben, es nicht ohne weiteres möglich ist. Es gibt eine Art Workaround, ohne das Markup ändern zu müssen - entfernen Sie position:relative von .box, setzen Sie nicht left und top auf das absolut positionierte Element, sondern verwenden Sie negative Ränder, um das Element an der gewünschten Stelle zu platzieren.

Es ist notwendig position:relative von .box zu entfernen, weil mit ihm Spannweite absolut relativ zu .box positioniert ist, und so kann die overflow:hidden Grenzen nicht entkommen. Ohne es wird es absolut relativ zum Körper positioniert und kann dann .box mit den negativen Rändern überlagern.

Es ist wichtig, nicht top zu setzen, bottom, left oder right obwohl - dies wird dazu führen, dass der eingestellte Abstand vom Körper positioniert werden. Wenn Sie jedoch nichts einstellen (alle), wird es in der korrekten Inline-Position angezeigt.

.wrap{ 
    width: 500px; 
    margin: 50px auto; 
    border: 1px solid green; 
} 

.box{ 

} 

.main{ 
    width: 100px; 
    height: 100px; 
    background: green; 
} 

span{ 
    position: absolute; 
    background:red; 
    margin-left:-50px; 
}

http://jsfiddle.net/c55hS/5/

Quelle

2013-09-03 09:58:25 mikel

Leicht hacky, aber dies funktionieren würde,

Hinzufügen eines .inner-wrap in Ihrem .wrapdiv

<div class="wrap"> 
    <div class="inner-wrap">

Zugabe Dann left-padding zum .wrap und verschieben die border nach unten zu .inner-wrap

.wrap{ 
    width: 500px; 
    margin: 50px auto; 
    overflow: hidden; /*causes the problem */ 
    padding-left:50px; 
} 
.inner-wrap { 
    border: 1px solid green; 
}

DEMO

Quelle

2013-09-03 10:03:45 Xareyo

Absolute Position und Überlauf in CSS ausgeblendet

Antwort

Verwandte Themen