css - 如何在另一个div的顶部隐藏半个div？

Question

我如何编写 css 来完成以下效果？

我当前的设置是外部 div position: relative，内部 div position: absolute。没用。

请指教。非常感谢。

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

Answer 1

您的代码几乎就在那里。您需要做的是将overflowparent 上的属性设置为hidden。默认情况下，您的浏览器会将其设置为visible，这样就可以显示任何突出到元素两侧的内容，如您所见。

overflow: hidden这是一些在工作中显示的代码。在 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;
}

​需要注意的是，在这个例子中，我只是隐藏了垂直方向的溢出。您可以在两者中设置它，或者只是水平或垂直设置。这是很整洁的东西。

有兴趣了解有关溢出的更多信息吗？我的人 Chris Coyier 有一篇关于它的优秀文章。你应该在某个时候通读一遍。

Answer 2

为了让响应式设计更加灵活，这里有一个使用百分比尺寸的设置。

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

这是一个小提琴，您可以更轻松地使用屏幕/窗格大小来查看框拉伸和保持位置。