2

divの上にアイコンを配置しようとしていますが、オーバーレイするdivが残りのコンテンツを押し下げています。かなり簡単なはずですが、行き詰まっています。このフィドルを見て、私が間違っていることを教えてください（デザインでテーブルを使用することは別として！）

body{
 background-color: #666;   
}
.sizesbg {
    background-color:#fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 170px;
    text-align: center;
}
.soldicon {
    background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
    height: 155px;
    left: 0;
    top: 0;
    width: 170px;
    z-index: 2;
}
<table>
<tr>
    <td class="sizesbg">
        <div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;"> 
            <img src="http://www.carfolio.com/images/dbimages/zgas/manufacturers/id/843/bmw-logo.png" width="140" height="140">
        </div>
    </td>

    <td class="sizesbg">
        <div class="soldicon"></div>
        <div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;"> 
            <img src="http://mcurrent.name/atarihistory/warner_books_logo.gif" width="140" height="140">
        </div>
    </td>        
    <td class="sizesbg">
        <div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;"> 
            <img src="http://www.mindxstudio.com/images/mindxstudio-logo-icon.jpg" width="140" height="140">
        </div>
    </td>                
</tr>
</table>

ありがとう！

4

5 に答える 5

7

divで使用position:absolute;しますが、もちろん、親要素position:relative;は適切な場所にとどまる必要があります

このようなもの：http： //jsfiddle.net/EESAc/5/

編集： これはChromeでうまく機能します...しかし、テーブル要素の位置プロパティが定義されていないため、他のブラウザ（Firefoxなど）で問題が発生しました。代わりにブロック要素を使用する必要があります...別のブラウザを使用すると機能しますdiv画像の周りに配置し、その位置を相対に設定します。アイデアのために別の簡単なフィドルを追加しました：http： //jsfiddle.net/EESAc/9/

于 2013-03-27T09:35:04.733 に答える
1

.soldiconクラスにaを与えるposition: absolute;このようにして、要素はドキュメントフローから取り出され、他の要素に影響を与えません。

于 2013-03-27T09:36:11.803 に答える
1

.soldiconcssに以下を追加してみてください。

位置：絶対;

于 2013-03-27T09:37:57.037 に答える
1

デモ

cssを次のように変更します：-

.soldicon {
    background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
    display: block;
    height: 155px;
    left: -7;
    top: 0;
    width: 170px;
    z-index: 2;
    position:absolute; // Change to absolute positioning
}
于 2013-03-27T09:40:54.683 に答える
1

私の場合（含まれているポップアップ要素は要素を含むよりも大きい）position：absolute; 必要な方法で正確に機能しませんでした（スクロールバーがインクルード要素に追加され、インクルードされたポップアップが完全に表示されませんでした）。したがって、解決策は次のとおりです。

position: fixed;
于 2014-12-19T11:52:52.000 に答える