Html 固定div超过绝对值?
我想创建一个类似的网页,特别是我感兴趣的图像与国旗。我试着做一些类似的事情,这就是我已经做到的: Html: 正如您所看到的,当您向下滚动时,带有pisition:absolute的content div覆盖了带有position:fixed的所有其他div。但我希望当你向下搜索时,content div将只覆盖标题div和logo,ul将保持在所有内容的顶部。就像在Html 固定div超过绝对值?,html,css,Html,Css,我想创建一个类似的网页,特别是我感兴趣的图像与国旗。我试着做一些类似的事情,这就是我已经做到的: Html: 正如您所看到的,当您向下滚动时,带有pisition:absolute的content div覆盖了带有position:fixed的所有其他div。但我希望当你向下搜索时,content div将只覆盖标题div和logo,ul将保持在所有内容的顶部。就像在 我不确定我是否做对了,因为我是创建html的新手。有没有其他方法制作这样的东西?只要在徽标和导航上使用更高的z索引,它就会按照您
我不确定我是否做对了,因为我是创建html的新手。有没有其他方法制作这样的东西?只要在徽标和导航上使用更高的z索引,它就会按照您的意愿工作。只要在徽标和导航上使用更高的z索引,它就会按照您的意愿工作
<div id="logo"> <a href="#"><img src="http://s20.postimg.org/9sr84gnw9/logo.png" alt="logo"></img></a>
<ul id="navbar">
<li><a href="Marsrutai.html">Maršrutai</a>
</li>
<li><a href="Nuotraukos.html">Nuotraukos</a>
</li>
<li><a href="Apie mane.html">Apie mane</a>
</li>
<li><a href="Dviraciai.html">Dviračiai</a>
</li>
<li><a href="Kontaktai.html">Kontaktai</a>
</li>
</ul>
<div id="header">
<h1>MARŠRUTAI</h1>
</div>
<div id="content"></div>
body {
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
}
#header {
background-image:url(http://s20.postimg.org/gcpvgfth8/header.jpg);
position: fixed;
width: 100%;
height:150px;
text-align:center;
text-top:50%;
color: white;
top:70px;
left:0;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding: 50px 0;
}
#content {
width:100%;
height:100%;
position: absolute;
top:351px;
/*bacground gradients: http://lea.verou.me/css3patterns/# */
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
left:0;
bottom:0;
}
#logo {
position:fixed;
}
ul {
text-shadow: 0px 2px #444;
font-size: 20px;
padding: 0;
list-style: none;
text-align: center;
display: table;
margin: 0 auto;
position: fixed;
left: 32%;
right: 25%;
top:15px;
}
ul li {
position: relative;
margin: 0;
padding: 0;
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: inline-block;
text-decoration: none;
color: #eee;
padding: 5px 0;
white-space: nowrap;
margin: 5px;
vertical-align: middle;
text-align: center;
border: 1px solid transparent;
}
ul li a:hover {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
color: #CACACA;