页面链接不会显示

我对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

页面链接不会显示

回答

相关问题