CSS中关于菜单的定位

【问题标题】：Positioning in CSS regarding menusCSS中关于菜单的定位
【发布时间】：2017-12-31 16:55:06
【问题描述】：

如果您查看下面提供的代码，就会发现一些定位问题。主要是我需要使幻灯片菜单从打开按钮下方打开，并且不会将图像推开。此外，我需要打开的按钮彼此相邻，但要分散一些。我不擅长定位，任何其他提示将不胜感激，谢谢！

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

#Bar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #592881
}

#logo {
    position: absolute;
    top: 30px;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 100px;
    left: 0;
    background: rgba(89, 40, 129, .7);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
    position: static;
}

.sidenav a:hover {
    color: grey;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.container {
    position: relative;
    text-align: center;
}

.slides {
    position: relative;
    height: 100%;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

.mySlides {
    display: block;
    left: 0;
    right: 0;
    max-width: 100%;
    padding-top: 140px;
    max-height: auto;
    vertical-align: middle;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.prev,
.next {
    cursor: pointer;
    position: relative;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

.next {
    float: right;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0px;
    border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.footer {
    position: relative;
    background-color: #F1F1F1;
    color: #A8A8A8;
    font-size: 18px;
    padding-left: 400px;
}

.overlay {
    float:left;
    height: 70%;
    width: 0;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: .5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding-bottom: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 300px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
<!DOCTYPE html>
<html>

<head>
    <title>Masters of Engineering</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\Zach\Desktop\Coding\Robotics Site\css\Main.css">
    <link rel="icon" href="img/Corner Logo.ico">
    <meta charset="utf-8">
</head>

<body>
    <div id="Bar"></div>
    <script>
    function openNav() {
        document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
    }
    </script>
    <span style="font-size:30px;cursor:pointer; display: inline-block;" onmouseenter="openNav()" onmouseleave="closeNav()">&#9776;open</span>
    <div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
        <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <span style="font-size:30px;cursor:pointer; display: inline-block;" onmouseenter="openNav()" onmouseleave="closeNav()">&#9776;open</span>
    <div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
        <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <div class='slideshow'>
        <div class="slides">
            <img class="mySlides fade" src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" height="auto" width="auto">
            <img class="mySlides fade" src="https://avante.biz/wp-content/uploads/Wallpaper-Images/Wallpaper-Images-005.jpg" height=auto width=auto>
            <img class="mySlides fade" src='https://svs.gsfc.nasa.gov/vis/a010000/a012000/a012005/Swift_Tidal_Disruption_2_Still.jpg' height="auto" width="auto">
        </div>
        <div class='buttons'>
            <a class="prev" onclick="plusDivs(-1); 
            clearInterval(myTimer); 
            myTimer = setInterval(carousel, 3500);">&#10094;
            </a>
            <a class="next" onclick="plusDivs(1); 
            clearInterval(myTimer);
            myTimer = setInterval(carousel, 3500);">&#10095;
            </a>
        </div>
    </div>
    <script>
    var myIndex = 0;
    var myTimer = setInterval(carousel, 3500);
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }

        myIndex++;
        if (myIndex > x.length) { myIndex = 1 }
        x[myIndex - 1].style.display = "block ";
    }
    myTimer; //change image every 3.5 seconds
    </script>
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = x.length }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block ";
    }
    </script>
    </div>
    <div class='footer'>
        <img src='http://www.mastersny.org/uploaded/template/default/images/common/bottom-logo.png'>
        <p>49 Clinton Avenue</p>
        <p>Dobbs Ferry, NY 10522</p>
        <p>(914) 479-6400</p>
    </div>
</body>

【问题讨论】：

    标签： html css css-position


    【解决方案1】：

    我创建了一个 div 容器，并将第二个跨度以绝对位置移动到其中。添加了一些边距，在底部删除了一个额外的关闭 div，并且您需要在图像上放置一个 alt。希望对您有所帮助。

    这是您的 CSS。 

    <style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

#Bar {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 64px;
background-color: #592881
}

#logo {
position: absolute;
top: 30px;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 100px;
left: 0;
background: rgba(89, 40, 129, .7);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
position: static;
}

.sidenav a:hover {color: gray;}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {
font-size: 18px;
}}

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;
}

@-webkit-keyframes fade {
0% {-webkit-opacity: .4;
opacity: .4;
}
100% {-webkit-opacity: 1;
opacity: 1;
}}

@keyframes fade {
0%  {
-webkit-opacity: .4;
opacity: .4;
}
100%  {
-webkit-opacity: 1;
opacity: 1;
}}

.container {
position: relative;
text-align: center;
}

.slides {
position: relative;
height: 100%;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}

.mySlides {
display: block;
left: 0;
right: 0;
max-width: 100%;    
padding-top: 140px;
max-height: auto;
vertical-align: middle;
position: relative;
margin-left: auto;
margin-right: auto;
}

.prev, .next {
cursor: pointer;
position: relative;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

.next {
float: right;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8);}
.footer {
position: relative;
background-color: #F1F1F1;
color: #A8A8A8;
font-size: 18px;
padding-left: 400px;
}

.overlay {
float:left;
height: 70%;
width: 0;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: .5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
padding-bottom: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 300px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}}
.buttonContainer{
height:3em;
width:100%;
background-color:#ffffff;
}
</style>

    这是 HTML。

    <!DOCTYPE html>
<html>
<head>
<title>Masters of Engineering</title>
<link rel="stylesheet" type="text/css" href="../../Zach/Desktop/Coding/Robotics%20Site/css/Main.css">
<link rel="icon" href="img/Corner Logo.ico">
<meta charset="utf-8">

<style>append your style here....</style>
<script>
function openNav() {   document.getElementById("myNav").style.width = "100%"; }
function closeNav() {document.getElementById("myNav").style.width = "0%";}
</script>
</head>
<body>
<div id="Bar"></div>
<div class="buttonContainer">  
<span style="font-size:30px;cursor:pointer; display: inline-block; position:absolute;" onmouseover="openNav();" onmouseout="closeNav();">&#9776;open</span>
<span style="margin-left:10%;font-size:30px;cursor:pointer; position:relative; display: inline-block;" onmouseover="openNav();" onmouseout="closeNav();">&#9776;open</span>
</div>
<div id="myNav" class="overlay" onmouseover="openNav();" onmouseout="closeNav();">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a></div></div>
<div id="myNav" class="overlay" onmouseover="openNav();" onmouseout="closeNav();">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a></div></div>
<div class='slideshow'>
<div class="slides">
<img class="mySlides fade" src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" height="auto" width="auto">
<img class="mySlides fade" src="https://avante.biz/wp-content/uploads/Wallpaper-Images/Wallpaper-Images-005.jpg" height=auto width=auto>
<img class="mySlides fade" src='https://svs.gsfc.nasa.gov/vis/a010000/a012000/a012005/Swift_Tidal_Disruption_2_Still.jpg' height="auto" width="auto">
</div>
<div class='buttons'>
<a class="prev" onclick="plusDivs(-1); 
clearInterval(myTimer); 
myTimer = setInterval(carousel, 3500);">&#10094;
</a>
<a class="next" onclick="plusDivs(1); 
clearInterval(myTimer);
myTimer = setInterval(carousel, 3500);">&#10095;
</a>
</div>
</div>


<script>
var myIndex = 0;
var myTimer = setInterval(carousel, 3500);
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) { myIndex = 1 }
x[myIndex - 1].style.display = "block ";
}
myTimer; //change image every 3.5 seconds
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) { showDivs(slideIndex += n);}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block ";
}
</script>
<div class='footer'>
<img src='http://www.mastersny.org/uploaded/template/default/images/common/bottom-logo.png'>
<p>49 Clinton Avenue</p>
<p>Dobbs Ferry, NY 10522</p>
<p>(914) 479-6400</p>
</div>
</body>

    【讨论】：

      【解决方案2】：

      您只需要设置 position: absolute 为滑动菜单和 margin-right 为第一个菜单按钮:)

      html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

#Bar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: #592881
}

#logo {
    position: absolute;
    top: 30px;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 100px;
    left: 0;
    background: rgba(89, 40, 129, .7);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
    position: static;
}

.sidenav a:hover {
    color: grey;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.container {
    position: relative;
    text-align: center;
}

.slides {
    position: relative;
    height: 100%;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

.mySlides {
    display: block;
    left: 0;
    right: 0;
    max-width: 100%;
    padding-top: 140px;
    max-height: auto;
    vertical-align: middle;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.prev,
.next {
    cursor: pointer;
    position: relative;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

.next {
    float: right;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0px;
    border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.footer {
    position: relative;
    background-color: #F1F1F1;
    color: #A8A8A8;
    font-size: 18px;
    padding-left: 400px;
}

.overlay {
position: absolute;
top: 115px;
    float:left;
    height: 70%;
    width: 0;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: .5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding-bottom: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 300px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
      <!DOCTYPE html>
<html>

<head>
    <title>Masters of Engineering</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\Zach\Desktop\Coding\Robotics Site\css\Main.css">
    <link rel="icon" href="img/Corner Logo.ico">
    <meta charset="utf-8">
</head>

<body>
    <div id="Bar"></div>
    <script>
    function openNav() {
        document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
    }
    </script>
    <span style="font-size:30px;cursor:pointer; display: inline-block; margin-right: 15px" onmouseenter="openNav()" onmouseleave="closeNav()">&#9776;open</span>
    <div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
        <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <span style="font-size:30px;cursor:pointer; display: inline-block;" onmouseenter="openNav()" onmouseleave="closeNav()">&#9776;open</span>
    <div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
        <div class="overlay-content">
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <div class='slideshow'>
        <div class="slides">
            <img class="mySlides fade" src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" height="auto" width="auto">
            <img class="mySlides fade" src="https://avante.biz/wp-content/uploads/Wallpaper-Images/Wallpaper-Images-005.jpg" height=auto width=auto>
            <img class="mySlides fade" src='https://svs.gsfc.nasa.gov/vis/a010000/a012000/a012005/Swift_Tidal_Disruption_2_Still.jpg' height="auto" width="auto">
        </div>
        <div class='buttons'>
            <a class="prev" onclick="plusDivs(-1); 
            clearInterval(myTimer); 
            myTimer = setInterval(carousel, 3500);">&#10094;
            </a>
            <a class="next" onclick="plusDivs(1); 
            clearInterval(myTimer);
            myTimer = setInterval(carousel, 3500);">&#10095;
            </a>
        </div>
    </div>
    <script>
    var myIndex = 0;
    var myTimer = setInterval(carousel, 3500);
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }

        myIndex++;
        if (myIndex > x.length) { myIndex = 1 }
        x[myIndex - 1].style.display = "block ";
    }
    myTimer; //change image every 3.5 seconds
    </script>
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = x.length }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block ";
    }
    </script>
    </div>
    <div class='footer'>
        <img src='http://www.mastersny.org/uploaded/template/default/images/common/bottom-logo.png'>
        <p>49 Clinton Avenue</p>
        <p>Dobbs Ferry, NY 10522</p>
        <p>(914) 479-6400</p>
    </div>
</body>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-07-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-12-28
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode