置き、他のDIVの上にDIVとイメージ

私は、次のHTML（Plunker Example）があります。置き、他のDIVの上にDIVとイメージ

<div class="first"> 
    <img src="http://placehold.it/350x150"> 
</div> 

<div class="second"> 
    Lorem Ipsum ... 
</div>

を、私は私が使用して最初のDIVの上に第2のDIVの一部を配置する必要があります。

body { 
    text-align: center; 
} 

.first { 
    background-color: orange; 
    z-index: 100; 
} 

.first img { 
    display: block; 
    margin: 0 auto; 
} 

.second { 
    background-color: red; 
    margin: -80px 0 auto; 
    z-index: 200; 
}

奇妙なのは、2番目のDIVのテキストは画像上に表示されますが、2番目のDIVでは表示されないことです。テキストは次のようにイメージ上に赤が表示されます。

これを修正する方法を知っている人はいますか？第二のdivで

出典

2016-12-16 Miguel Moura

はポジションを追加します。 https://css-tricks.com/almanac/properties/z/z-index/ https://jsfiddle.net/10L7fad9/ – sinisake

を、<div>要素はz-index含む位置CSSを無視しているposition: staticです。 .second要素にposition: relativeを追加すると、z-indexが適切に機能します。

また、マイナスマージンをtop: -80pxに変更しました。これはよりクリーンです。

body { 
 
    text-align: center; 
 
} 
 

 
.first { 
 
    background-color: orange; 
 
    z-index: 100; 
 
} 
 

 
.first img { 
 
    display: block; 
 
    height: auto; 
 
    outline: 0; 
 
    width: 100%; 
 
} 
 

 
.second { 
 
    background-color: red; 
 
    z-index: 200; 
 

 
    position: relative; 
 
    top: -80px; 
 
}

<body> 
 

 
    <div class="first"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 

 
    <div class="second"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 

 

 
</body>

出典

2016-12-16 19:06:30

私はそれを逃した...ありがとう –

position: relative;

出典

2016-12-16 19:05:36

さらに、特にユーザー名のために、lol。 – sinisake

あなたの名前のためではなく、ここに1つ。私は@MiguelMouraが何らかのRMTプレーヤーから買った共有アカウントだと思う。 –

は比較的秒のdiv位置決めしてみてください。デフォルトでは

.second { 
    background-color: red; 
    margin: 0 auto; 
    position:relative; 
    z-index: 200; 
}

出典

2016-12-16 19:06:16

あなたは次のコードを試すことができます。.secondする相対：

.second { 
    background-color: red; 
    margin: 0 auto; 
    z-index: 200; 
}

出典

2016-12-16 19:09:23 Hanif

置き、他のDIVの上にDIVとイメージ

答えて

関連する問題