个人中心
gpt4 book ai didi

html - css - 我无法移动导航菜单

转载 作者：太空宇宙 更新时间：2023-11-04 06:28:57 26 4
gpt4 key购买 nike

我正在学习 HTML 和 CSS。为了实践，我已经开始设计自己的个人网站。我有个问题。当我为新页面删除页面顶部的三行(h1、h3 和 p)时，导航菜单会上升，我无法降低它。无论我在底部输入什么值，它都保持固定在页面顶部。我该如何解决这个问题？

.vertical-menu {
  position:absolute;
  bottom: 50px;
}

.vertical-menu a{
  background-color:#eee;
  width: 200px;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover{
  background-color: #34ff00
}

.h1, h3, p {
  color:black;
}

body {
  background-image: url(sunset.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
<h1 align="center">Süleyman Yaman</h1>
<h3 align="center"> Welcome to my personal website!  </h3>

<p align="center"> This the personal website of me. You can find external links below<p/>

<div class="vertical-menu">
  <a class="active" href="#home">Home</a>
  <a href="aboutme.html">About Me</a>
  <a href=#programming>My Academic Work</a>
  <a href=#programming>Programming</a>
  <a href=#programming>Guitar Covers</a>
  <a href=#programming>Erasmus Blog</a>
  <a href=#programming>Contact</a>
</div>

最佳答案

只需像下面那样将 position:absolute; 更改为 position:relative; 即可。

.vertical-menu {position:relative;
padding-top: 20%;
                    bottom: 50px;
                    }


        .vertical-menu a{background-color:#eee;
                    width: 200px;
                    color: black;
                    display: block;
                    padding: 12px;
                    text-decoration: none;}
        .vertical-menu a:hover{
                    background-color: #34ff00
        }

        .h1, h3, p {color:black;}

        body {background-image: url(sunset.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          height: 100%;}
@media only screen and (min-height: 200px) {
  .vertical-menu {
    position:relative;
  }
}
<!doctype html> 
<html>
<head>
<title>Süleyman Yaman</title>
    
</head> 

<body>
<h1 align="center">Süleyman Yaman</h1>
<h3 align="center"> Welcome to my personal website!  </h3>


<p align="center"> This the personal website of me. You can find external 
links below <p/>


<div class="vertical-menu">
<a class="active" href="#home">Home</a>
<a href="aboutme.html">About Me</a>
<a href=#programming>My Academic Work</a>
<a href=#programming>Programming</a>
<a href=#programming>Guitar Covers</a>
<a href=#programming>Erasmus Blog</a>
<a href=#programming>Contact</a>

</div>

关于html - css - 我无法移动导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54844167/

26 4 0
文章推荐： javascript - jquery - 根据其他元素的 CSS 属性控制元素的 CSS 属性
文章推荐： java - 如何配置OSGI声明性服务范围？
文章推荐： java - Apache/Tomcat服务器中显示汉字
文章推荐： JavaFX Dropshadow CSS : What do the parameters mean? 如何在CSS中实现宽度和高度？