Question

如何编写css以达到以下效果？

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

请指教。非常感谢你。

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

Answer 1

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

以下是一些显示overflow: hidden正在运行的代码。 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;
}

值得注意的是，在这个例子中，我只是隐藏了垂直方向的溢出。您既可以设置它，也可以只是水平设置或垂直设置。这是非常好的东西。

有兴趣了解更多有关溢出的信息吗？我的男人Chris Coyier有an excellent article about it。你应该在某个时候给它一个通读。

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>

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

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

2 个答案:

HTML

CSS