8

比較的配置されたdivが後続のコンテンツをプッシュダウンするのを防ぐにはどうすればよいですか？次の例では、大きな赤いdivの上に小さな緑のdivを表示しようとしていますが、緑のdivが表示されると次の赤いdivが押し下げられます。

これを行うためのより良い方法があれば、ヒントをいただければ幸いです。

実行例は次のとおりです：http：//jsfiddle.net/38Rqh/

<html>
<head>
<style type="text/css" media="screen">

.top {
  display: none;
  background-color: green;
  width: 100px;
  position: relative;
  top: -50px;
}

.bottom {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
}

.bottom:hover + div {
    display: block;
}

</style>
</head>
<body>

<div class="bottom">

</div>
<div class="top">Displaying data</div>

<div class="bottom">

</div>
<div class="top">Displaying data</div>

<div class="bottom">

</div>
<div class="top">Displaying data</div>

</body>
</html>
4

2 に答える 2

7

relativeまだスペースを取ります。必要なのはですabsolute。1つの可能性は、要素をに設定して.bottomからposition: relative、.top要素をその中に配置し、絶対的に配置することです。

http://jsfiddle.net/38Rqh/1/

.top {
  display: none;
  background-color: green;
  width: 100px;
  position: absolute;
  top: 150px;
}

.bottom {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
    position: relative;
}

.bottom:hover .top {
    display: block;
}

<div class="bottom">
<div class="top">Displaying data</div>
</div>

<div class="bottom">
<div class="top">Displaying data</div>
</div>

このようにして、.top要素はそれらを含むことに関連して配置され.bottomます。

.topこれには、ホバリング時にを非表示にしないという追加の利点があり.top、例に見られるちらつきが発生します。

于 2012-11-08T20:25:49.097 に答える
2

私はこれをどこに表示されるべきかと混同したかもしれませんが、相対の代わりにラッパーdivと位置絶対を使用すると余分なスペースがなくなります。

<html>
<head>
<style type="text/css" media="screen">

.top {
  display: none;
  background-color: green;
  width: 100px;
  position: absolute;
  bottom: 50px;
}

.bottom {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
}

.bottom:hover + .top {
    display: block;
}

.wrapper { position: relative; }

</style>
</head>
<body>

<div class="wrapper">
  <div class="bottom">

  </div>
  <div class="top">Displaying data</div>
</div>
<div class="wrapper">
  <div class="bottom">

  </div>
  <div class="top">Displaying data</div>
</div>
<div class="wrapper">
  <div class="bottom">

  </div>
  <div class="top">Displaying data</div>
</div>
</body>
</html>
于 2012-11-08T20:21:24.230 に答える