Question

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

Answer 1

只需将function strdel($a,$b,$c) { return ($a.substring(0,$b)+$(substr $a $c $a.length)) } function substr($a,$b,$c) { return $a.substring($b,($c-$b)) } $string = "Bark in the woods" $in = $(substr $(strdel $string 0 5) 0 2) write-host $in更改为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;
  }
}

CSS-我无法移动导航菜单

1 个答案: