Erlauben Sie einem bestimmten Tag, den Überlauf zu überschreiben: versteckt

Ich habe ein <div>, das ist ein bestimmtes heightund width, und overflow:hiddendamit bestimmte innere Bilder abgeschnitten werden; Ich möchte jedoch, dass ein Bild <div>aus dem Rand herausspringt (dh das überschreibt overflow:hidden). Wie mache ich das?

Der Trick besteht darin, das overflow:hiddenElement bei position:staticeinem höheren übergeordneten Element (und nicht dem overflow:hiddenübergeordneten Element) zu belassen und es zu positionieren . Wie so:

.relative-wrap {
    /*relative on second parent*/
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
    
    /*no relative on immediate parent*/
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

Ich möchte auch darauf hinweisen, dass ein sehr häufiger Anwendungsfall für den Wunsch, dass ein Element seinen Container auf diese Weise überläuft, darin besteht, dass Sie die Höhe eines Dropdowns oder Containers von X auf 0 animieren möchten und daher overflow: hiddenauf dem Container haben müssen. Normalerweise befindet sich im Container etwas , das Sie unabhängig davon überlaufen möchten. Da diese Elemente nur zugänglich sind, wenn der Container "offen" ist, können Sie den Überlauf nutzen und auf "zurücksetzen" setzen, visible nachdem der Container vollständig geöffnet ist, und ihn dann wieder auf "setzen", hiddenbevor Sie versuchen, den Container wieder zu animieren height: 0.

Ich weiß, dass dies ein alter Beitrag ist, aber dies kann getan werden (zumindest in Chrome). Ich habe das vor ungefähr zwei Jahren herausgefunden und es hat mich ein paar Mal gerettet.

Stellen Sie das Kind auf eine feste Position ein und verwenden Sie Ränder anstelle von oben und links, um es zu positionieren.

#wrapper {
    width: 5px;
    height: 5px;
    border: 1px solid #000;
    overflow: hidden;
}

#parent {
    position: relative;
}

button {
    position: fixed;
    margin: 10px 0px 0px 30px;
}

Hier ist ein Beispiel: http://jsfiddle.net/senica/Cupmb/

Alle gegebenen Antworten waren für mich nicht zufriedenstellend. Sie sind meiner Meinung nach alle hackisch und in komplexen Layouts schwer zu implementieren.

Hier ist eine einfache Lösung:

Sobald ein Elternteil einen bestimmten Überlauf hat, gibt es keine Möglichkeit, seine Kinder diesen überschreiben zu lassen.

Wenn ein Kind den übergeordneten Überlauf überschreiben muss, kann ein Kind einen anderen Überlauf haben als die anderen Kinder.

So definiert den Überlauf für jedes Kind statt es auf der Erklärung der Eltern :

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>

            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Hier ist eine Geige:

http://jsfiddle.net/ryojeg1b/1/

Sie können nicht, es sei denn, Sie ändern Ihr HTML-Layout und verschieben das Bild aus dem übergeordneten div. Ein wenig mehr Kontext würde Ihnen helfen, eine akzeptable Lösung zu finden.

Wickeln Sie Ihre overflow: hidden divmit einer anderen div, die eine CSS-Eigenschaft von - hat

transform: translate(0, 0);

und in Ihrem specefic-Tag, dass es das - überschreiben soll overflow: hidden, setzen Sie es mit -

position: fixed; es wird weiterhin relativ zu seinem Elternteil positioniert sein

dh -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

Sehen Sie die Geige hier

Alles oben ist schön, aber nichts schlägt JAVASCRIPT. (Verwenden jquery). Damit,

<script>
var element = $('#myID');
var pos = element.offset();
var height = element.height(); // optional
element.appendTo($('body')); // optional
element.css({
    position : 'fixed'
}).offset(pos).height(height);
</script>

Ich erhalte die ursprüngliche Position des Elements (relativ zur Seite), erhalte optional die Höhe oder Breite, hänge das Element optional an den Körper an, wende die neue CSS-Regel an position : fixedund wende schließlich die ursprüngliche Position sowie optional Breite und Höhe an .

Sie können ein Element aus dem Div überlaufen lassen, indem Sie es in ein anderes Div einschließen und dann Ihr Bild als Position festlegen: absolut; und versetzen Sie es mit Rändern.

<div class="no-overflow">
<div>
<img class="escape" src="wherever.jpg" />
</div>
</div>

.no-overflow{
overflow:hidden;
width: 500px
height: 100px
}

.escape{
position: absolute;
margin-bottom: -150px;
}

Beispiel (getestet in Firefox + IE10) http://jsfiddle.net/Ps76J/

Derzeit ist mir nicht bekannt, dass ein übergeordneter Knoten mit ausgeblendetem Überlauf Kinder außerhalb sichtbar machen kann (mit Ausnahme von position:fixedKindern).

Es ist jedoch möglich, anstelle eines Überlaufs einfach die Gliederungseigenschaft zu verwenden, die auf die Farbe des Hintergrunds festgelegt ist, kombiniert mit der Z-Index-Eigenschaft, um einige Elemente zu maskieren, während andere wie folgt beibehalten werden.

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>

Überlauf bezieht sich auf den Container, in dem übergroße Inhalte nicht angezeigt werden können (wenn sie ausgeblendet sind). Es hat nichts mit inneren Elementen zu tun, die überlaufen können: was auch immer und immer noch nicht angezeigt werden.

Der Z-Index scheint nicht zu funktionieren, aber hier habe ich eine Problemumgehung, die für mich gut funktioniert hat, da ich einen Überlauf benötigte, um beim Bewegen eines untergeordneten Elements nur "sichtbar" zu sein:

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

Ich habe eine supereinfache Lösung für dieses Problem: Verwenden Sie das "pre" -Tag. Ich weiß, dass das Pre-Tag der Verwendung von "goto" in der Programmierung entspricht, aber hey: es funktioniert!

<div style="overflow: hidden; width: 200px;">
  <pre style="overflow: auto;">
    super long text which just goes on and on and on and on and one, etc.
  </pre>
</div>