2010-08-01 42 views
4

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

+0

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

回答

4

這正是你需要做的。

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

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

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

希望這會有所幫助。

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

您可以使用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 */ 
} 
+0

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