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

Question

如何编写css以实现以下效果？

我目前的设置是外部div position: relative,内部div position: absolute.没工作.

请指教.非常感谢你.

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

Answer 1

你的代码几乎就在那里.您需要做的是overflow在要隐藏的父项上设置属性.默认情况下,您的浏览器会将其设置为可见,这样就可以显示突出显示元素两侧的任何内容,如您所见.

这是一些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>

这是一个小提琴，您可以在其中更轻松地调整屏幕/窗格大小以查看框拉伸并保持位置。