將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放在其他元素上

回答

相關問題