How to hide half a div on top inside of another div?

Question

How do I write the css to do the below effect?

My current setting is outer div position: relative, inner div position: absolute. Didn't work.

Please advise. Thank you very much.

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

Answer 1

Your code is quite nearly there. What you need to do is set the overflow property on the parent to be hidden. By default, your browser will set it to visible, which makes it so that anything that sticks out the sides of your element will be shown, as you've seen.

Here's some code that shows overflow: hidden at work. View it on JSFiddle.

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

​ A point to note is that, in this example, I've just hidden the overflow in the vertical direction. You can set it in both, or just horizontally or just vertically. It's pretty neat stuff.

Interested in learning more about overflow? My man Chris Coyier has an excellent article about it. You should give it a read-through sometime.

Answer 2

To keep things a little more flexible for responsive design here's a setup that uses percentage dimensions.

$('.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>

Here's a fiddle where you can more easily play with the screen/pane size to see the boxes stretch and maintain position.