4

ある div を別の div に重ねようとしています。div のサイズがわかっている場合、これは非常に簡単です。

ここで解決: ある div を別の div にオーバーレイする方法

だから、ここに私のHTMLがあります：

<div class="container">
  <div class="overlay"></div>
  <div class="content"></div>
</div>

私の場合、「コンテンツ」または「コンテナ」の div の正確なサイズがわかりません。これは、div 内のコンテンツを制御できないためです (サードパーティの開発者向けにアプリを拡張可能にしています)。

jsFiddle で私の例を参照してください 。オーバーレイはコンテンツ全体をカバーする必要があります。幅 100%、高さ 100%。ただし、私の例ではオーバーレイを絶対に配置したため、これは機能しません。

1 つの解決策は、JavaScript を使用してコンテンツ div のサイズを取得してから、オーバーレイのサイズを設定することです。画像サイズが指定されていない場合、画像が読み込まれるまで待ってdivのサイズを再計算する必要があるため、このソリューションはあまり好きではありません。

CSSでこの問題を解決する方法はありますか? 

4

7 に答える 7

2

0px位置を絶対値に設定してから、ボックスを展開する4つの位置値すべてを設定できます。こちらのデモをご覧ください：http：//jsfiddle.net/6g6dy/

このように、オーバーレイまたはコンテナにパディングが必要な場合（実際の値heightとwidth値を使用した場合のように）、再計算について心配する必要はありません。これは、常にボックスの外寸に合わせて調整されるためです。

于 2012-07-09T12:08:48.537 に答える
1

次の理由により、これを行うことはできません。

  1. オーバーレイは、そのサイズを制限するために何にも含まれていません (コンテナに高さ/幅が適用されていないため)。
  2. コンテンツ div のサイズは、コンテンツが読み込まれると変化する可能性があります (幅/高さが固定されていないため)。

JavaScript* を使用してこれを解決しました。例えば。

function resizeOverlay() {
  $('.overlay').css({
    width: $('.content').width()
    height: $('.content').height()
  });
}
$('.content').find('img').on('load', resizeOverlay);

*コードはテストされていません。

于 2012-07-12T22:12:44.310 に答える
0

このデモを参照してください：http：//jsfiddle.net/rathoreahsan/kEsbx/

上記のデモで述べたようにしようとしていますか？

CSS：

#container {
    position: relative;
}

.overlay,
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay{
    z-index: 10;
    background: #ccc;
}
于 2012-07-09T12:06:48.343 に答える
0

ねえ、あなたはこのように見えます: http://tinkerbin.com/Vc4RkGgQ

CSS

.container {
position:relative;
background:blue;
  color:white;
}

.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
于 2012-07-09T12:11:05.970 に答える
0

あなたが何をしようとしているのか正確にはわかりませんが、これはうまくいくかもしれません：

containerでなければなりませんrelative: static から何でも

overlayそしてcontent次のとおりabsoluteです。最初の非静的親で上/左に移動します。全く流れません。上部要素の上部と上部に
同じtop/leftものを指定します。z-index

于 2012-07-09T12:11:52.077 に答える
0

実際、これは JavaScript なしで実行できます。問題は、#container要素の幅がページ全体に対して 100% であることです。これを修正するには、次のことができます。

a) 絶対に配置し、

#container {
   position: absolute;
}

b) 浮かせたり、

#container {
   float: left;
}

c）テーブルセルとして表示する

#container {
   display: table-cell;
}

上記のいずれかで十分です。すべてを適用する必要はありません。また、.content絶対に配置しないでください。これ#containerにより、同じ幅/高さを持つことができなくなります。

于 2014-05-30T09:12:01.460 に答える
0

高さを設定した後に画像が読み込まれるのが心配な場合は、先に進んで含まれている div で画像のサイズを設定し、padding-bottom hackを使用できます。このようにして、ブラウザがページをペイントするときに、画像がロードされる前にどれくらいの大きさになるかがわかります。

于 2016-08-05T17:16:32.140 に答える