37

いくつかの div を一列に並べて配置したいのですが、前の div と重ねることもできます。

私が取得しようとしているのは、特定の長さのイベントの div を含むタイムラインです。イベントは互いに重複する可能性があります。

私の考えは、各 div に同じ上部位置、増加する z-index および増加する左位置 (イベントの時間に従って) を与えることでした。後で、マウスオーバー イベントによって個々の 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 から飛び出し、ページ内のある場所に絶対に配置されます。

4

4 に答える 4

54

それは簡単です。絶対配置を使用して内部 div を作成しますが、相対配置を使用する div でラップします。

<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 プロパティを設定するか、JavaScript (jQuery など) を使用してプロパティを変更します。

これにより、コードがクリーンで読みやすくなります。

于 2014-04-04T09:07:54.843 に答える
33

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

<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, and positionit lyを与え、relative内部divの s 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>
于 2012-11-23T16:56:32.617 に答える
9

解決策を見つけました。css を知っている人にとっては、おそらく驚くほど明白です。

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

結局のところ、私は絶対位置を誤解していました。固定と同じではありませんが、私にはそのように見えました。

https://developer.mozilla.org/en-US/docs/CSS/positionでよく説明されています。

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

クイックソリューション

位置を追加: 相対; 日のクラスに移動し、内側の div で絶対配置を使用します。

于 2012-11-23T17:09:42.070 に答える
6

アトリビュートを使用する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;
}
于 2014-01-20T15:03:36.563 に答える