添加一個覆蓋股利

我創建一個全屏幕設計，其中：添加一個覆蓋股利

頂部底部％酒吧特定的高度，但寬度爲100％
左中Bar是特定的寬度，但100％的高度
右側中部條佔用的無論是左

我試圖創建一個「選項」的div會從右下欄彈出，覆蓋我的地圖上右中側空間。

enter image description here

然而，通過看我的code，你可以看到我做了什麼讓選擇DIV底部的div開始向下推移。此外，我給它100％的寬度，但它不適應其容器的寬度，而是屏幕的寬度。

#options { 
    position: absolute; 
    background: #39E023; 
    width: 100%; 
    height: 200px; 
    text-align: right; 
}

謝謝你們！

來源

2012-10-06 pufAmuf

給你的DIV一個margin-top等於高度，負：

#options { 
    position: absolute; 
    background: #39E023; 
    width: 100%; 
    height: 200px; 
    text-align: right; 
    margin-top: -200px; 
}

來源

2012-10-06 16:37:06

感謝馬達拉，它確實解決了定位問題，但是'寬度100％'仍然使得div不在屏幕之外。 – pufAmuf

啊，關鍵是把位置設置爲相對！ – pufAmuf

只要給右中容器position:relative，然後設置選項股利left:0; bottom:0;

我更新了fiddle

來源

2012-10-06 16:38:54 danwellman

謝謝丹威爾曼，但是這將酒吧放在左下方的完整底部，覆蓋底部酒吧。 – pufAmuf

嗯，似乎沒有在我連接到的小提琴。您是否已將相對位置添加到適當的容器中？ – danwellman

是的，這是我在Firefox 15的JsFiddle中看到的：http://i.imgur.com/1taOo.jpg – pufAmuf

添加一個覆蓋股利

回答

相關問題