重疊CSS元素

我想讓藍色元素坐在綠色圓圈的一半，並在它後面。我怎樣才能做到這一點？另外，爲什麼綠色圓圈和藍色元素之間有一個隨機的邊緣空間？重疊CSS元素

enter image description here

#profile-circle { 
    margin-right: auto; margin-left: auto; 
    height: 164px; width: 164px; 
    border-radius: 84px 84px 84px 84px; 
} 

#main-container { 
    margin-right: auto; margin-left: auto; 
    height: 400px; width: 450px; 
}

http://jsfiddle.net/LqJ79/

來源

2012-07-05 user1174762

您不應該依賴第三方網站來展示您的問題。將重要代碼添加到問題中，以防jsfiddle宕機。 – Quantastical 2012-07-05 18:39:25

感謝您使用jsfiddle來展示您的問題。 – mwcz 2012-07-05 18:43:32

使用屬性「的立場：絕對的;」在第二個框，我更新了爵士小提琴CSS下列要求：

#main-container { 
    margin-right: auto; 
    margin-left: auto; 
    height: 400px; 
    width: 450px; 
    background-color: blue; 
    position: absolute; 
    top: 80px; 
}

來源

2012-07-05 18:37:19

position: relative將幫助你在這裏。它允許您使用z-index將圓圈放在方框上，也可以使用top將相對於當前位置移動方框。 position: absolute的問題在於它將元素排除在流程之外，這不是您想要的。

#profile-circle { 
    position: relative; 
    z-index: 100; 
} 

#main-container { 
    position: relative; 
    z-index: 50; 
    top: -100px; 
}

See the demo

來源

2012-07-05 18:37:28 kapa

移動藍元素了最簡單的方法是設定一個負的上邊距：

margin-top: -82px;

然而，與當前的標記，藍色的元素將坐在頂部。

您可以把綠色元素下的藍某在你的HTML，然後使用CSS將其向上滑動，或者您可以：

使用position: relative;兩個元素
設置在一個z-index藍色和綠色的元素，以確定哪些在頂部出現（得到綠色元件更高的數量，以便使其出現在頂部）
設置top: -82px;藍色元件上它向上滑動下的綠色一個

它們之間的空間是由於你的利潤：

margin-top: 15px; 
margin-bottom: 5px;

來源

2012-07-05 18:38:46 mwcz

可以使position: fixed; top:10px; left: 10px; z-index: 1; ，什麼不能在css中移動它們。像這樣：

http://jsfiddle.net/LqJ79/

來源

2012-07-05 18:41:40 TitanicSwimmer

的「神奇」的空間兩者之間是由於在div用戶信息的空白。我改變了CSS如下：

#user-info { 
height: auto; 
width: 380px; 
margin-right: auto; 
margin-left: auto; 
}

這將刪除空間。

來源

2012-07-05 18:46:54 Anshul

回答

相關問題