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

演示

将您的 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: fixed;
于 2014-12-19T11:52:52.000 回答
1

给类.soldiconaposition: absolute;这样该元素将被从文档流中取出，并且不会影响其他元素。

于 2013-03-27T09:36:11.803 回答
1

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

位置：绝对；

于 2013-03-27T09:37:57.037 回答