Wie kann man ein halbes Div oben innerhalb eines anderen Divs ausblenden?

Question

Wie schreibe ich das css, um den unten genannten Effekt zu erzielen?

Meine derzeitige Einstellung ist outer div position: relative , inneres div position: absolute . Es hat nicht funktioniert.

Bitte beraten Sie mich. Ich danke Ihnen vielmals.

    ------------
    |//////////|
    |//////////|  <= hidden
--------------------
|   |          |   |
|   | inner div|   |
|   |          |   |
|   ------------   |
|                  |
|                  |
|                  |
|                  |
--------------------

Answer 1

Ihr Code ist schon fast fertig. Was Sie noch tun müssen, ist das Setzen der overflow Eigenschaft des Elternteils zu sein versteckt . Standardmäßig setzt Ihr Browser sie auf sichtbar Das bedeutet, dass alles, was an den Seiten des Elements herausragt, angezeigt wird, wie Sie gesehen haben.

Hier ist ein Code, der zeigt overflow: hidden bei der Arbeit. Auf JSFiddle ansehen .

html

<div id="parent">
  <div>
  </div>
</div>

css

#parent {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  overflow-y: hidden;
}
#parent > div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 25px;
  background: #555;
}

Dabei ist zu beachten, dass ich in diesem Beispiel nur den Überlauf in vertikaler Richtung ausgeblendet habe. Sie können ihn in beiden Richtungen oder nur horizontal oder nur vertikal einstellen. Das ist eine ziemlich nette Sache.

Möchten Sie mehr über den Überlauf erfahren? Mein Mann Chris Coyier hat ein ausgezeichneter Artikel darüber . Sie sollten es sich einmal durchlesen.

Answer 2

Um die Dinge für das responsive Design etwas flexibler zu halten, gibt es hier ein Setup, das prozentuale Abmessungen verwendet.

$('.toggler').click(function() {
    $('.outer').toggleClass('show-inner');
});

  /* this is just to center the content */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.outer {
  /* add position so that .inner can be position: absolute */
  position: relative;
  /* make .outer 50% of width and height of parent (body) */
  width: 50%;
  height: 50%;
  background-color: hsla(0, 0%, 0%, 1);
}
 .show-inner {
   /* just for demonstration purposes */
   /* this class toggles to show full .inner element */
   /* overflow: hidden hides any content that overflows .outer */
   overflow: hidden;
 }
.inner {
  /* we can make .inner position absolute within .outer now that.. */
  /* position: relative was set on parent (.outer) */
  position: absolute;
  top: 0;
  left: 50%;
  /* translateX used in combination with left to center .inner */
  /* translateY used to position .inner 50% above its height.. */
  /* starting from a declared position of top: 0 */
  transform: translateX(-50%) translateY(-50%);
  /* make .inner 50% of width and height of parent (.outer) */
  width: 50%;
  height: 50%;
  background-color: hsla(0, 100%, 72%, 0.6);
}
/* below styles the toggle button used just for this demo */
.toggler {
  position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);
  padding: 0px 10px 3px;font-variant: small-caps;font-weight: bold;
  color: white;background-color: black;cursor: pointer;font-family: Verdana,sans-serif;
} .toggler:hover { color: gray; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="outer show-inner">
  <div class="inner">

  </div>
</div>

<div class="toggler">toggle inner</div>

Hier ist eine Fiedel wo Sie leichter mit der Bildschirm-/Fenstergröße spielen können, um zu sehen, wie sich die Boxen ausdehnen und ihre Position beibehalten.