将div放在其他元素上

我试图在div上放置一个图标，但是覆盖div正在推动其余内容。我卡住了，虽然它应该很容易。请看看this fiddle，让我知道我在做什么错误（在设计中使用表格分开！）将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>

谢谢！

来源

2013-03-27 bikey77

了div使用position:absolute;，但当然，父元素需要有position:relative;留在正确的地方

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

编辑： 这种运作良好，在Chrome ...但其他一些浏览器有问题（例如Firefox），因为对于表格元素，位置属性没有定义，您应该使用一个块元素来代替......所以如果您在图像周围使用另一个div并将其设置为位置相对。我又增加了快速捣鼓一个想法： http://jsfiddle.net/EESAc/9/

来源

2013-03-27 09:35:04

如果使用绝对位置，记住了一套家长要相对定位;） – Terry 2013-03-27 09:40:59

是...注意到特里警告......我做了第二的jsfiddle更加清晰： http://jsfiddle.net/EESAc/5/ – 2013-03-27 09:46:25

这将所有图标放在同一图像 – bikey77 2013-03-27 09:54:34

给类.soldicon一个position: absolute;这样的元素将被取出的公文流转，并不会影响其他元素。

来源

2013-03-27 09:36:11 SKeurentjes

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

position：absolute;

来源

2013-03-27 09:37:57 NilisB

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 
}

来源

2013-03-27 09:40:54 ssilas777

在我的情况（包括弹出式元素是更大然后包括元）的位置是：绝对的; 没有按照我需要的方式工作（滚动条被添加到包含元素上，并且包含的弹出窗口未完全显示）。因此，解决办法是：

position: fixed;

来源

2014-12-19 11:52:52 user4377806

将div放在其他元素上

回答

相关问题