Question

我试图在div上放置一个图标，但是重叠的div正在推动其余的内容。虽然它应该很容易但我已经卡住了。请查看this fiddle，让我知道我做错了什么（除了在设计中使用表格！）

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>

谢谢！

Answer 1

在div上使用position:absolute;，但父元素当然需要position:relative;才能保留在正确的位置

这样的事情： http://jsfiddle.net/EESAc/5/

修改这在Chrome中效果很好......但是其他一些浏览器也有问题（例如Firefox），因为对于表元素，定位属性没有定义，你应该使用块元素......所以如果你使用另一个{{{}围绕图像并将其位置设置为相对位置。我为一个想法添加了另一个快速小提琴： http://jsfiddle.net/EESAc/9/

Answer 2

为类.soldicon提供position: absolute;这样，元素将从文档流中取出，不会影响其他元素。

Answer 3

尝试将以下内容添加到.soldicon css：

的位置是：绝对的;

Answer 4

<强> DEMO

将您的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
}

Answer 5

在我的情况下（包括popup元素更大，然后包括元素）position：absolute; 没有完全按照我需要的方式工作（滚动条添加到包含元素，并且包含的弹出窗口没有完全显示）。所以解决方案是：

position: fixed;

将div放在其他元素上

5 个答案: