7

以下の効果を実行するためにcssを作成するにはどうすればよいですか？

私の現在の設定は、outer div position: relative、innerdivposition: absoluteです。動作しませんでした。

お知らせ下さい。どうもありがとうございます。

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

2 に答える 2

11

あなたのコードはほぼそこにあります。あなたがする必要があるのはoverflow、親のプロパティを非表示に設定することです。デフォルトでは、ブラウザはそれを表示に設定します。これにより、これまで見てきたように、要素の側面から突き出ているものがすべて表示されるようになります。

これが動作中のコードですoverflow: hidden。JSFiddleで表示します。

html

​&lt;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;
}

注意すべき点は、この例では、垂直方向のオーバーフローを非表示にしたところです。両方に設定することも、水平方向または垂直方向に設定することもできます。それはかなりきちんとしたものです。

オーバーフローについてもっと知りたいですか？私の男クリス・コイエはそれについて素晴らしい記事を持っています。いつか読み過ごしてください。

于 2013-01-05T02:09:57.840 に答える
5

レスポンシブデザインのために物事をもう少し柔軟に保つために、ここにパーセンテージディメンションを使用するセットアップがあります。

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

これは、画面/ペインのサイズをより簡単に操作して、ボックスが伸びて位置を維持できることを確認できるフィドルです。

于 2016-12-25T16:53:27.530 に答える