CSS定位拼圖

Question

下面的圖片代表我嘗試創建的網站佈局。藍色部分（右下）表示圖像應位於三個相鄰元素後面並略微溢出。

我不知道最好的辦法做到這一點，在一分鐘我有一個包裝的div圓的彩色部分，並把一個背景圖像在那裏，但我不知道這是最好的方法作爲包裝div需要有一個固定的大小。

任何建議將非常受歡迎。

http://www.gumpshen.com/images/layout.png

Answer 1

這應該是你所需要的...

你的CSS應該是這個樣子：

<!-- add CSS Reset before this --> 

#header { 
    background-color:#888; 
    height:100px; 
} 

#content { 
    position:relative; 
    float:left; 
} 

#topleft { 
    position:relative; 
    float:left; 
    width:50%; 
    background-color:yellow; 
    z-index:3; 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
    min-height:100px;    
} 

#topright { 
    position:relative; 
    float:left; 
    width:50%; 
    background-color:red; 
    z-index:3; 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
    min-height:100px;    
} 

#bottomleft { 
    position:relative; 
    float:left; 
    width:50%; 
    background-color:green; 
    z-index:3; 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
    min-height:100px;    
} 

#bottomright { 
    position:absolute; 
    left:49%; 
    bottom:0; 
    width:50%; 
    padding:20px 0 0 17px; 
    background-color:blue; 
    z-index:2; 
    min-height:100px;    
} 

你的HTML應該是這個樣子：

<div id="header"> 
    <h1>Header</h1> 
</div> 
<div id="content"> 
    <div id="topleft"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 
    <div id="topright"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 
    <div id="bottomleft"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 
    <div id="bottomright"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 
</div> 

備註：「lorem ipsum」，不透明度和m在高度添加只是爲了演出:)

Answer 2

是固定寬度嗎？如果是這樣，你可以做一些與背景圖像作弊。如果它固定爲和固定高度，則更好 - 只需將整個圖像保存爲背景即可。

你也可以給你的圖片背景圖像，就像這樣：然後

 
#MyImage { 
    padding: 20px 0 0 20px; 
    background: url(images/image-background.jpg) top left no-repeat; 
} 

圖像將坐在中間，其邊緣呈現的背景。那麼你的圖片可以是200x100px，背景圖片是220x120px。

Answer 3

如果我理解你正確地這就是我的回答：

如果灰色頭，只把它你怎麼想。

然後有一個「內容」div包裹黃色，紅色，綠色和藍色，這應該是相對定位。從那裏你可以絕對位置藍色，使它重疊黃色，紅色和綠色。然後用一些z-indexing，你應該有你需要的東西。

Answer 4

我會假設你已經知道了彩色塊。

現在，您可以將原始圖像放在藍色框中作爲背景，放置在右下方，並將該圖像的半透明版本（或使用css透明度）絕對放置在包裝的右下角。原始不會顯示的半透明圖像，只會顯示在周圍的框中。

Answer 5

使用相對定位來定位元素，並且不要忘記將正確的Z-Index值設置爲您要置於頂部的div。