CSS固定位置互相重疊

基本上我做了一個導航欄，並且由於Jquery做了很多調整大小以使網站看上去很「美觀」我不想使用水平列表，因此每個按鈕都被創建像這樣：CSS固定位置互相重疊

<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>

（是的，他們是有充分理由的所有圖像按鈕）

，但唯一的問題是他們固定並設置爲「0頂部」在頁面頂部和一個結果不能坐在一起，而是相互重疊，關於如何讓自己仍然保持固定位置的任何想法，他們頂到0，但讓他們相鄰？

HTML

<div id="top"> 
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a> 
</div>

CSS

#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; } 
#top { position: relative; top:0; padding-left: 25px; }

初始化函數（$上運行（文件）。就緒（））

$('a.button').animate({ 
    height: '+=5px', 
    }, 20, function() { 
$('a.button').animate({ 
    opacity: 0.6, 
    height: '-=5px', 
}, 20); 
});

感謝

來源

2012-09-25 Matthew

你需要他們爲中心，或者你關心，如果他們是在左邊或右邊的角落？ –

這並不重要，但我需要他們在頁面頂部 – Matthew

好吧。讓我知道我的答案是否有幫助。 –

只要把任何元素需要固定的機智hin一個容器元素（在這種情況下，我將使用ID爲「top_fixed」的div）。

考慮下面的html：

<div id='top_fixed'> 
    <a href='http://google.com'>Google</a> 
    <a href='http://yahoo.com'>Yahoo</a> 
</div> 
<div id='tall'></div>

現在，下面的CSS：

a { display: inline; } 
#top_fixed { position: fixed; top: 0; left: 0; width: auto; } 
#tall {height: 2000px; background: #000;}

DEMO：http://jsfiddle.net/mHKNc/1/

來源

2012-09-25 23:24:58

它工作的很棒！非常感謝你！ +1 – Matthew

優秀。很高興有幫助。 :) –

把它們放在一個容器中，即id="header" ，給標題position:fixed;top:0;etc...

然後，對每個環節的/按鈕拆招：

position:relative;display:inline-block;float:left;

如果你想讓他們爲中心，然後在#header使用text-align:center;並從鏈接

所以容器float:left將被固定，但裏面的按鈕將是相對的，不會重疊。

希望這有助於！

非常粗糙的例子

http://jsfiddle.net/6SCTZ/

<div id="header"> 
    <div class="button">button1</div> 
    <div class="button">button2</div> 
    <div class="button">button3</div> 
</div>

CSS：

#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center } 

.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}

來源

2012-09-25 23:29:16

這也很好，非常感謝您花時間！ – Matthew

哇這是驚人的答案。它很棒！ –

CSS固定位置互相重疊

回答

相關問題