web-dev-qa-db-ja.com

相対位置でdivをオーバーラップさせるにはどうすればよいですか？

いくつかのdivを互いに隣接する行に配置するだけでなく、前のdivと重複させることもできます。

取得しようとしているのは、特定の長さのイベントのdivを持つタイムラインです。イベントは互いにオーバーラップできます。

私のアイデアは、各divに同じ上部位置、zインデックスを増やし、左位置を増やす（イベントの時間に応じて）ことでした。後で、マウスオーバーイベントによって個々のdivをポップアウトして、オーバーラップを視覚化しました。

私がやることは、各divが次のdivの下に配置されるようにすることです。 top属性をいじることで、水平方向に揃えることができますが、パターンが表示されません。

 <div class="day">
         <div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
         <div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
         <div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
 </div>

絶対位置を使用すると、要素は周囲のdivから飛び出し、ページ内のある場所に絶対に配置されます。

csshtmllayercss-position
28
TilmanBaumann

簡単だ。 絶対配置を使用して内部divを作成します-相対配置を使用するdivでwrapped：

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
    <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
    <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>

負のマージンなどの別の方法を使用することもできますが、HTMLを動的に変更する場合はお勧めできません。たとえば、内側のdivの位置を移動する場合は、コンテナのCSSプロパティのtop/left/right/bottomを設定するか、JavaScript（jQueryなど）を使用してプロパティを変更します。

コードをクリーンで読みやすい状態に保ちます。

36
Mahendra Mustika Wijaya

負のマージンを使用してください！

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>

フィドル： http://jsfiddle.net/vZv5k/

別のソリューション：

.dayクラスa width、height、およびposition it relatively、内部divs absolutely positioned。

以下を確認してください[〜＃〜] css [〜＃〜]：

.day {position: relative; width: 500px; height: 500px;}

そして[〜＃〜] html [〜＃〜]：

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
31
Praveen Kumar Purushothaman

私は解決策を見つけました。 cssを知っている人なら誰でも目がくらむほど明らかです。

私の要素は周囲のdivから飛び出すため、絶対位置を使用できないと思いました。

結局のところ、私は絶対的なポジショニングを誤解していました。修正されたものと同じではありませんが、私にはそのように見えました。

https://developer.mozilla.org/en-US/docs/CSS/position はそれをうまく説明しています。

絶対的な位置決めは、周囲の次のアンカーに対して絶対的に配置されます。他のアンカーが定義されていない場合、デフォルトはページ全体になります。何かをアンカーにするには、位置を指定する必要があります。

クイックソリューション

position：relative;をdayクラスに追加し、内部divで絶対配置を使用します。

9
TilmanBaumann

top属性を使用すると、相対的に配置されたオブジェクトを移動することもできます。私のコードサンプルでは、​​z-indexであるため、赤いボックスが緑のボックスと重なります。 z-indexを削除すると、緑色のボックスが上に表示されます。

HTML：

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS：

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}
4
Benny Neugebauer