如何在另一個div中隱藏半個div?

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


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

如何編寫css來實現以下效果?

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

我現在的設置是外部分區位置:相對,內部分區位置:絕對。沒有工作。

Please advise. Thank you very much.

請建議。非常感謝。

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

2 个解决方案

#1


7  

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.

這里有一些代碼顯示溢出:隱藏在工作中。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.

有興趣了解更多關於溢出的信息嗎?我的朋友Chris Coyier寫了一篇很好的文章。你應該找時間通讀一下。

#2


3  

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.

這是一個小提琴,你可以更容易地玩屏幕/窗格大小來看到盒子伸展和保持位置。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/01/05/7253f548caf87d636dd2aafe71ce04d8.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com