如何重疊圖片上的div？

我想在div的邊框上放置一個小的圓形登錄圖像，這樣一半圖像就會出現在邊框線之外，只是爲了樣式目的？我想我必須設置z-index，但是OR還有什麼更好的方法？如何重疊圖片上的div？

2010-08-01 nectar

到目前爲止你有什麼嘗試，你可以發佈你需要的樣本圖像？ – Sarfraz 2010-08-01 12:24:08

這正是你需要做的。

給你img一個類的名字。然後在你的樣式表添加這樣的事情

#classname 
{ 
position: absolute; 
z-index: 10; 
top: #distance from top of page# 
left: #distance from left of page# 
}

z-index的需要比你的DIV，如果你沒有改變它，這將有索引爲0的數。

希望這會有所幫助。

來源

2010-08-01 12:24:18

.overout { 
text-decoration:none; 
position: relative; 
z-index: 10; 
top: 105px; 
right: -25px; 
}

來源

2010-08-01 12:38:01 nectar

您可以使用div很容易地做到這一點。請看下面的代碼

<html> 
<head><title>Logo test</title></head> 
<body> 
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;"> 
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;"> 
</div> 
</div> 
</body> 
</html>

所有你需要做的就是更換第二div的「背景色」屬性的「背景圖片」屬性和巢您現有的DIV中核實。確保你製作的標誌確切的大小，並設置背景重複：不重複;

希望有所幫助。測試我發佈的示例代碼。你可以把所有的樣式信息放入這樣的css類：

.logo 
{ 
    background-image: url(yourlogo.png); 
    background-repeat: no-repeat; 
    width: /* width of logo */ 
    height: /* height of logo */ 
    top: /* distance from top */ 
    left: /* distance from left */ 
}

來源

2010-08-01 12:46:13 Aedaeum

通常，您希望遠離絕對定位，因爲如果您的頁面主要由相對對象組成，這會中斷頁面的流動。我發現z-index只對絕對定位的對象有用，否則你可以使用嵌套div來達到同樣的效果。 – Aedaeum 2010-08-01 12:53:19

如何重疊圖片上的div？

回答

相關問題