为什么当打开CSS弹出时页面滚动到顶部？
为什么当打开CSS弹出时页面滚动到顶部？
提问于 2015-10-15 01:10:40
我有一个纯CSS弹出框，用于移动导航菜单。每当我单击菜单的“三明治”按钮，屏幕就会跳到页面的顶部。这是什么，我怎样才能让它停下来？这是我的源代码。
<!DOCTYPE HTML>
<html>
<head>
<style>
@font-face {
font-family: 'HK Explorer';
src: url('HKExplorer-Regular.eot');
src: url('HKExplorer-Regular.eot?#iefix') format('embedded-opentype'), url('HKExplorer-Regular.woff') format('woff'), url('HKExplorer-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Genome';
src: url('Genome-Thin.eot');
src: url('Genome-Thin.eot?#iefix') format('embedded-opentype'), url('Genome-Thin.woff') format('woff'), url('Genome-Thin.ttf') format('truetype');
}
html,
body {
overflow-x: hidden;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
#triangle {
width: 0;
height: 0;
border-top: 75px solid #113344;
border-right: 90px solid transparent;
color: white;
position: fixed;
z-index: -100;
display: block;
}
.navmenu {
position: absolute;
display: block;
margin: 6px;
margin-top: -67px;
float: left;
cursor: pointer;
transition: all 0.3s ease-out;
}
.box1 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.box2 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
margin-top: 4px;
margin-bottom: 4px;
}
.box3 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.popup {
padding: 1px;
background: #0E7BA3;
width: 140px;
position: fixed;
transition: all 200ms ease-in-out;
margin-left: 6px;
margin-top: 50px;
font-family: 'Roboto', sans-serif;
line-height: 20px;
color: #fff;
text-decoration: underline;
}
.popuptriangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #0E7BA3;
position: fixed;
z-index: -100;
margin-left: 6px;
margin-top: 35px;
transition: all 200ms ease-in-out;
}
.nav {
margin-bottom: 2px;
margin-left: 5px;
padding-top: 10px;
margin-top: 5px;
}
.navitem img {
display: inline;
vertical-align: middle;
margin-left: -40px;
padding-right: 10px;
}
.navitem {
padding-bottom: 10px;
}
.popup .close {
position: absolute;
text-align: right;
margin-left: 122px;
transition: all 200ms;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#content {
position: absolute;
z-index: -1000000;
margin-top: 35px;
}
#title {
text-align: center;
border-bottom: 5px solid #FF5444;
width: 50%;
margin-left: auto;
margin-right: auto;
font-family: 'Roboto', sans-serif;
font-size: 300%;
letter-spacing: 1px;
}
#copy {
text-align: center;
margin-top: 3%;
font-family: 'Palanquin', sans-serif;
padding: 1%;
font-size: 100%;
line-height: 22px;
}
</style>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href='https://fonts.googleapis.com/css?family=Palanquin:200|Roboto:500' rel='stylesheet' type='text/css'>
</head>
<title>testing</title>
<body>
<div id="triangle">
<div class="navmenu">
<a class="button" href="#popup1">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</a>
</div>
</div>
<div id="popup1" class="overlay">
<div class="popuptriangle"></div>
<div class="popup">
<a class="close" href="#">x</a>
<div class="content">
<ul class="nav">
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/99ozgp.png" width="30px">About</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/v4weoo.png" width="30px">Portfolio</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i60.tinypic.com/pay4i.png" width="30px">Resources</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i57.tinypic.com/29zdj51.png" width="30px">Contact</a>
</div>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="title">
Hello.
</div>
<div id="copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac volutpat sem. Nam congue pellentesque augue. Aliquam aliquam erat enim, eget luctus dolor luctus eu. Maecenas risus ipsum, consectetur ac tempus quis, scelerisque sed risus. Vivamus tincidunt velit enim, nec aliquet erat pellentesque eget. Nunc eleifend, nibh sed aliquam commodo, justo felis convallis nunc, a varius justo nisi sit amet eros. In maximus finibus elit sed auctor. Curabitur hendrerit leo id congue vehicula. Maecenas sed lacus non purus fringilla vulputate in blandit purus.
</div>
</div>
</body>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-15 01:46:58
div#triangle有position: fixed，它将其置于正常DOM流(http://www.w3.org/TR/WD-DOM/introduction.html)之外。固定位置基本上是指元素的位置跟随用户的滚动。默认情况下，元素有position: static，它将元素放在顶部或内联。因此，#popup1是第一个“静态”元素，因此它位于页面顶部。
一个解决办法是使#popup1被修复，这样它也会跟随用户的滚动。
#popup1 {
position: fixed;
top: 0;
left: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33138176
复制相关文章
相似问题
腾讯云开发者
