CSS-他們怎麼做沒有絕對定位和Z-索引？

我是新手，但並不是全新的CSS和編碼。在過去的6個月左右，我用自己的編碼進行了長途跋涉。幾個星期前，我遇到了一個非常酷的佈局網站。特別是TigerHawk的標誌橫跨（或者至少出現了）幾個非AP Div，我似乎無法弄清楚他們是如何做到的。我敢肯定，他們不是AP Div的，因爲如何的div改變位置，當我展開頁面等CSS-他們怎麼做沒有絕對定位和Z-索引？

有人可以見識一下它是如何在不使用AP的div做了什麼？我很確定我可以使用AP div來複制它，並調整Z-index，以便將徽標懸停在我需要的div頂部，但是這樣的佈局對於我所期望的操作來說過於僵化。

這裏是鏈接到hawkeyesports.com網站，其中TigerHawk標誌位於比其他的div。 Check out hawkeyesports.com for some really cool CSS I am trying to figure out.

任何援助將不勝感激！

來源

2011-02-28 LawGen

#mast-logo絕對定位。

#mast-logo { 
    background: url("http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png") no-repeat scroll 0 0 transparent; 
    height: 133px; 
    left: -13px; 
    position: absolute; 
    top: -4px; 
    width: 198px; 
    z-index: 200; 
}

It is not really difficult to do，一旦你得到absolute和relative定位的竅門。

來源

2011-02-28 02:58:11 alex

感謝亞歷克斯。我不認爲使用AP Div時div會在擴展頁面時移動，等等？並感謝鏈接！ – LawGen 2011-02-28 03:26:35

@LawGen它的父母有'position：relative'，這意味着你提供給任何絕對定位的孩子的偏移是相對的。 – alex 2011-02-28 03:29:00

啊......我明白了（所以我認爲）。鏈接和解釋非常有幫助，我非常感謝！ – LawGen 2011-02-28 03:34:25

標誌旁邊的菜單根據螢火有這個CSS：

#mast-logo { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
background:transparent url(http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png) no-repeat scroll 0 0; 
height:133px; 
left:-13px; 
position:absolute; 
top:-4px; 
width:198px; 
z-index:200; 
}

來源

2011-02-28 02:59:23

Firebug ...從來沒有聽說過它，但會看着它！哇，所以它絕對定位....？那麼這個「Firebug」可以讓我們在一個CSS站點達到峯值？謝謝您的幫助！ – LawGen 2011-02-28 03:23:08

是的，你可以調試Javascript，查看CSS等Firebug是必須的。不要忘記標記爲答案。 :) – 2011-02-28 04:00:51

CSS-他們怎麼做沒有絕對定位和Z-索引？

回答

相關問題