时间戳

首页 > 解决方案 > css - 我无法移动导航菜单

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

问题描述

我正在学习 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>

标签： htmlcss

解决方案

只需将其更改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>

推荐阅读