Question

我有一个纯粹的CSS弹出框用于移动设备上的导航菜单。每当我单击菜单的三明治按钮时，屏幕就会跳到页面顶部。这是什么以及如何让它停止？ Here's my source code.

 <!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>

Answer 1

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;
}

打开CSS弹出窗口时为什么页面滚动到顶部？

1 个答案: