頁面鏈接不會顯示

我對HTML/CSS相當陌生，而且我正在創建一個網站。頁面鏈接不會顯示

我想把一個鏈接放在頁面的頂部，但它沒有顯示。根據瀏覽器開發人員工具，它位於標題之後。我給了它所有其他人中最高的z-index。（我知道有很多經歷，但我不知道這可能是導致這個問題。）

這裏是我的HTML代碼：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #444; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 99; 
 
    background-color: #EC7063; 
 
    height: 135px; 
 
    width: 100%; 
 
    opacity: .9; 
 
    margin-bottom: 0px; 
 
} 
 

 
header h1.logo { 
 
    box-sizing: content-box; 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 5vw; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    line-height: 200px; 
 
} 
 

 
header h1.logo:hover { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
div.home { 
 
    margin-top: -50px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    opacity: .8; 
 
} 
 

 
div.about { 
 
    background-color: #F5B7B1; 
 
} 
 

 
h2 { 
 
    font-size: 3em; 
 
    margin-top: 40px; 
 
    text-align: center; 
 
    letter-spacing: -2px; 
 
} 
 

 
h3 { 
 
    font-size: 1.7em; 
 
    font-weight: 100; 
 
    margin-top: 30px; 
 
    text-align: center; 
 
    letter-spacing: -1px; 
 
    color: #999; 
 
} 
 

 
.menu { 
 
    position: static; 
 
    z-index: 1000; 
 
    float: right; 
 
    margin-top: 18px; 
 
    margin-right: 18px; 
 
    line-height: 0px; 
 
} 
 

 
.menu li { 
 
    position: static; 
 
    display: block; 
 
} 
 

 
.menu li+li { 
 
    position: static; 
 
    margin-left: 35px; 
 
} 
 

 
.menu li a { 
 
    position: static; 
 
    color: #444; 
 
    text-decoration: none; 
 
} 
 

 
img.home_img { 
 
    box-sizing: content-box; 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
img { 
 
    margin: -5px; 
 
} 
 

 
.container { 
 
    display: ; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>My Sugar</title> 
 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1 class="logo">Sugar me</h1> 
 
    <strong><nav> 
 
       <ul class="menu"> 
 
       <li><a href="{{ url_for('home') }}">Home</a></li> 
 
       <li><a href="{{ url_for('about') }}">About</a></li> 
 
       </ul> 
 
      </nav></strong> 
 
    </header> 
 
    {% block content %} {% endblock %} 
 
</body> 
 

 
</html>

來源

2017-08-07 Daniel

OK，所以鏈接overlapdding對方是你的標記唯一的問題？ –

這個問題還不清楚，我可以看到徽標背後顯示的是{％block content％} {％endblock％}'，這是個問題，你可以簡單地把它包起來，就像'

{% block content %} {% endblock %}

'一樣，它會顯示在標題前面，鏈接只顯示在標題上方 –

我這麼認爲。我真的不知道問題是什麼... – Daniel

我已經重新創建在的jsfiddle頁，

https://jsfiddle.net/Kai_Draord/gme434hp/2/

的變化： 1.顯示第e水平列出項目我用css「display：inline;」請檢查參考資料的細節。

據我所知，您要將標題固定在頂部，因此我添加了「top：0px」將標題固定到頂部。
我包裹的網站

{嵌段含量％％} {％末端嵌段％}

的內容在容器類顯示它，我加入的CSS標題下方「餘量機頂：135px;」和其他一些造型，使它看起來更好，而不是隱藏在標題後面。

請在下面找到容器類的CSS。

.container { 
    display: block; 
    position:relative; 
    z-index:1000; 
    margin-top:135px; 
}

當你讓你的網站，在瀏覽器中按F12和玩的CSS屬性，這將有助於你得到想要的結果更快。謝謝。

參考：menu items

來源

2017-08-07 11:20:28

每當我向下滾動標題變得非常透明...有沒有辦法改變這種情況？ – Daniel

@Daniel對不起，我忘了內容需要滾動，不應該顯示在標題後面 - https://jsfiddle.net/Kai_Draord/jo65vbz3/1/ –

刪除 Z-index屬性，在這裏檢查結果 - https://jsfiddle.net/frvasileva/gev0Let5/

.container { 
    display: block; 
    position:relative; 
/* z-index:1000;*/ 
    margin-top:135px; 
}

來源

2017-08-07 12:34:59

頁面鏈接不會顯示

回答

相關問題