負のマージンとボーダー

負のマージンを使用して積み重ねたい画像があります。しかし、明確に定義された境界を持たないスタッキングイメージは視覚的に混乱する可能性があるので、私はそれらの周りに境界線を追加する必要があると考えました。不思議なことに、画像が正しく積み重ねられても、その境界線は前の要素の下になります。負のマージンとボーダー

なぜ私はこのような動作をしていますか、直感的なレベルで境界線を表示する方法はありますか？

#second { 
 
    margin-top: -50px; 
 
    margin-left: 20px; 
 
} 
 

 
img { 
 
    border: 5px ridge green; 
 
    display: block; 
 
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

EDIT：Firefoxの、これはそれがどのように見えるかである場合：

出典

2016-06-22 codebreaker

クロム2番目の画像は、その境界線で最初にオーバーラップします。どのブラウザを使用していますか？編集：Internet Explorer 11で動作しません。 – Alexandre

Chromeではうまく見えますが、Firefoxに問題が表示されます。 – j08691

ええ、それはFirefoxです。 – codebreaker

問題がChromeで表示されませんが、FirefoxとIEで行います。

：あなたはFFで、あまりにも国境の描画を強制的に変換し使用することができます

#second { 
 
    margin-top: -50px; 
 
    margin-left: 20px; 
 
} 
 

 
img { 
 
    border: 5px ridge green; 
 
    display: block; 
 
    position: relative; 
 
}

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

出典

2016-06-22 20:19:44 j08691

また、重複しているかどうかを確認するために、 'z-index'の使用を提案します。 – DaniP

@DaniP - 必要な場合がありますが、ここでは必要ではないようです。 – j08691

より多くのimgが関与する場合は、オプションとしてその点を指摘したいと思います – DaniP

：簡単な解決策はただのようなものが相対的に画像の位置を設定しないように見えます

#second { 
 
    margin-top: -50px; 
 
    margin-left: 20px; 
 
} 
 

 
img { 
 
    border: 5px ridge green; 
 
    display: block; 
 
    } 
 

 
/* FF debug*/ 
 
div + div img { 
 
    transform:scale(1);/* transform + anyvalue that does nothing new forces the layout to be redrawn */ 
 
} 
 
div {float:left; 
 
    margin:1em;

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div> 
 
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>

出典

2016-06-22 20:23:48

負のマージンとボーダー

答えて

関連する問題