如何解決我的錨鏈接問題

我有一個像

<div id='header'> 
    bunch of stuff….and iamges 
</div> 

<div> 
    <a href='#test1>test1</a> 
    <a href='#test2>test2</a> 
    <a href='#test3>test3</a> 
</div> 

<div class='content'> 
    <a name='test1'>test1 project</a> 
    bunch of stuff 

    <a name='test2'>test1 project</a> 
    bunch of stuff 

    <a name='test3'>test1 project</a> 
    bunch of stuff 
</div>

我的CSS

#header{ 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    margin-bottom: 0 
height:150px; 
}

但是一個頁面，好像我點擊測試1到TEST3鏈接每一次，我的「內容」 DIV得到推到頂部我頭div。所以我的'內容'div覆蓋我的頭div（150px）。有沒有辦法解決我的問題？非常感謝！

來源

2013-10-03 FlyingCat

這就是你所有的CSS？ – Lance

您正在使用'position：fixed'，它從文檔流中移除元素。所以，其他內容將會重疊。你有什麼試圖解決它？你的嘗試出了什麼問題？ – showdev

將z-index參數設置爲-1。把它放在一個高價值的位置上，將你的股利放在其他股票上，並且將浮動在其他股票上。-1將它設置爲小於其他人的三分之一。如果您不關心特定的z代碼，您也可以將其完全刪除。

更新：固定位置也會導致你的div被「錨定」在頁面的某個位置，並被擴展而不會「推倒」其他頁面。請考慮更改CSS位置元素值（http://www.w3schools.com/css/css_positioning.asp）。

來源

2013-10-03 00:12:54

但我需要我的div。刪除z-index會使'content'覆蓋我的頭部div +1 – FlyingCat

答案更新。我認爲頭寸和Z-指數都是造成這個問題的原因。 –

我會嘗試：

.content{position:absolute;top:150px;overflow-y:auto;}

強制所有內容始終是標題下方。

來源

2013-10-03 00:17:49 DevlshOne

我試過了，但它會讓我的內容div不可滾動。 – FlyingCat

如果添加溢出-y樣式會怎麼樣？ – DevlshOne

我的'內容'div下面的內容將全部跳轉到頂部.... – FlyingCat

嗨也許this should do the trick

<a name="AnchorName" class="anchor"></a>

和

.anchor { 
    position: relative; 
    top: -[number]px; 
}

編輯：

或者像這樣

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>

來源

2013-10-03 00:25:32

這裏錨DOI的一個非常奇怪的方式NG它...

假設這是你的HTML，將錨感興趣的元素前右（沒有內容！）：

<div id='header'>bunch of stuff and images</div> 
<div class='nav'> 
    <a href='#test1'>test1</a> 
    <a href='#test2'>test2</a> 
    <a href='#test3'>test3</a> 
</div> 

<div class='content'> 
<a name="test1"></a> 
<div class='content-panel'> 
    <a>test1 project</a> 
    bunch of stuff 
</div> 

<a name="test2"></a> 
<div class='content-panel'> 
    <a>test2 project</a> 
    bunch of stuff 
</div> 

<a name="test3"></a> 
<div class='content-panel'> 
    <a>test3 project</a> 
    bunch of stuff 
</div> 

</div>

而應用此CSS：

body { 
    margin: 0; 
} 
#header { 
    position: fixed; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    margin-bottom: 0; 
    height:150px; 
    background-color: rgba(125,125,20,0.6) 
} 
.nav { 
    margin-top: 150px; 
    border: 0px solid blue; 
    padding: 10px; 
    width: auto; 
    border-bottom: 1px solid blue; 
} 
.content { 
    overflow: auto; 
} 
.content-panel { 
    background-color: lightgray; 
    margin: 0px 0; 
    padding: 10px; 
    height: 400px; 
} 
a:target { 
    display: block; 
    line-height: 0; 
    margin-bottom: 150px; 
}

見演示在：http://jsfiddle.net/audetwebdesign/6gHE6/

訣竅涉及使用:target選擇器添加一個頁邊距等於固定標頭的高度的錨的底部。

這會在你的頁面中產生一些額外的空白區域，哦，好吧......就像我說的，有點奇怪的做法。

或者，JavaScript/jQuery修補程序可能是門票！

來源

2013-10-03 00:53:14

如何解決我的錨鏈接問題

回答

相關問題