-59

<div>の上に を配置したい<img>。

HTMLは次のとおりです。

body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <div class="image"> <img src="css_js/img/image.jpg"> </div>
      <div class="content img-circle">[content]</div>
    </div>
  </div>
</div>

写真付きの詳細情報:

これは、ウィンドウ ビューポートが大きい場合の外観です。
ここに画像の説明を入力

これは、ウィンドウのビューポートが小さいときの様子です。
ここに画像の説明を入力

それを修正する方法についてのアイデア? どんな助けでも素晴らしいでしょう！

4

1 に答える 1

42

z-index次のように、コンテンツのプロパティをdiv画像よりも高く設定してみてください。

.content{
    z-index: 3;
}

これにより、コンテンツdivが画像の上になるようになります。ブラウザーが小さくなるにつれてサイズが大きくなるようにするには、メディア クエリを使用する必要があります。これらは、画面のサイズに基づいてさまざまな CSS ファイルをロードできるようにする、頭の中に含めるタグです。基本的には、画面が小さいときに読み込まれる CSS ファイルのフォント設定を大きくする必要があります。メディア クエリに慣れていない場合は、https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries を参照してください。幸運を！

アップデート：

コメントに基づいて、コードを次のように変更する必要があります。

<div class="span12">
    <div class="image"> 
        <img src="css_js/img/image.jpg"> 
        <div class="content img-circle">[content]</div>
    </div>
</div>

これにより、imgと.contentが でラップされるようになり.imageます。次に、CSS ファイルに次のルールを追加します。

.content{
    position: relative;
}

これにより、画像が配置されている場所に対するコンテンツの位置が変更されdivます。positionプロパティを読んで、移動する方法を学びましょう.content。divただし、ブラウザのサイズの変化に応じてのサイズ/位置を更新するには、メディア クエリが必要です。

于 2013-07-05T16:13:51.653 に答える