web-dev-qa-db-ja.com

画像上のフローティングDiv

Divを画像上に浮かせることができません。ここに私が達成しようとしているものがあります：

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
    }
    .tag {
       float: left;
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

この画像では：

enter image description here

「Featured」ボックスを画像の上に浮かせたいのですが、代わりにフロートを「クリア」して、ブロック要素として表示されているかのように画像を次の行に折り返します。残念ながら、私が間違っていることを理解することはできません。何か案は？

htmlcsscss-floatz-index
48
Jeremy Harris

失敗することはありません。質問をSOに投稿すると、啓発的な「あは」の瞬間が得られ、それがわかります。ソリューション：

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
       position: relative;
    }
    .tag {
       float: left;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
<div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
</div>

重要なのは、コンテナをrelativeに配置し、タグをabsoluteに配置する必要があることです。

91
Jeremy Harris

位置を少し変更します。

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: green;
}

jsFiddleの例

コンテナに相対位置を設定し、次に内部タグdivに絶対位置を設定する必要があります。内側のタグの絶対配置は、外側の相対的に配置されたdivを基準にします。タグdivにz-indexルールさえ必要ありません。

18
j08691

実際には、余白を追加するだけです：-20px;タグクラスに修正しました。

http://jsfiddle.net/dChUR/7/

Divはブロック要素であるため、当然、違反しないように境界線が定義されています。終了タグがないため、画像の横にコンテンツのない画像のレイヤーを作成するには、自然な境界に違反するなど、望まないことを強制する必要があります。

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  }
.tag {
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 1000;
  margin-bottom: -20px;
  }

別の方法として、背景として画像を使用してdivを作成し、コンテンツを好きな場所に配置する方法があります。

<div id="imgContainer" style="
         background-image: url("foo.jpg"); 
         background-repeat: no-repeat; 
         background-size: cover; 
         -webkit-background-size: cover; 
         -mox-background-size: cover; 
         -o-background-size: cover;">
  <div id="theTag">BLAH BLAH BLAH</div>
</div>
6
Thomas Cheney

あなたは正しい考えを持っています。 .tagのposition:relativeをposition:absoluteに変更し、position:relativeを.containerに追加するだけでよいようです。

2
user1618143

相対および絶対位置指定を使用することを検討できます。

`.container {  
position: relative;  
}  
.tag {     
position: absolute;   
}`

私はそこでテストしましたが、位置を変更したい場合は、これをマージンとして使用します：

top: 20px;
left: 10px;

上から20ピクセル、左から10ピクセルに配置します。必要でない場合はこれを残します。

0
user2690583