Question

我无法将元素放到想要的位置。由于我做标头的方式，我只有这个问题。我申请了position: absolute。您可以在此处看到一个示例：http://jacobgasser.com，并且可以在其中找到所有代码，或者可以进一步阅读，然后我将其放在这里。

我希望页面左上方的文本在页面的白色部分

这是index.html

<body onload="loadUp();">
  <div class="menu">
    <a href="https://github.com/jacobgasser" target="_blank"><div 
 class="menuItem">Projects</div></a>
  </div>
  <div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
  </div>


<div class="article">
<div class="articleHead">Who am I?</div>

    </div>
<script src="scripts/main.js"></script>
</body>

这是main.css

body {
  margin:0;
  padding:0;
}
.title {
  color: white;
  text-align: center;
  font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
  text-decoration: none;
  color: inherit;
}
.article {
  font-family: "Arial";
  display: inline-block;
  padding: 5px 10px 5px 10px;
  margin: 5px 10px 5px 10px;
  text-align: center;
  position: relative;
}
.articleHead {
  display: inline-block;
  padding: 5px 10px 5px 10px;
  margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
  background-color: white;
  color: black;
  cursor: pointer;
  -webkit-transition: 0.2s;
}
.titleBG {
  background-color: #23272A;
  display: block;
  width: 100%;
  z-index: -1;
  position: fixed;
  top: 0;
}
::selection {
  color: #23272A;
  background-color: white;
}

::-moz-selection {
    color: #23272A;
    background-color: white;
}

@font-face {
  font-family: lemon;
  src: url("fonts/LemonMilk.otf");
}
@font-face {
  font-family: cavs;
  src: url("fonts/CaviarDreams.ttf");
}

Answer 1

此问题的一种简单解决方案是删除position: fixed; top: 0;并调整页面的margin-top和margin-bottom。只需将.titleBG和.title的CSS更改为以下内容：

.titleBG {
    background-color: #23272A;
    display: block;
    width: 100%;
    z-index: -1;
}

.title {
    color: white;
    text-align: center;
    font-size: 1000%;
    opacity: 0;
    -webkit-transition: 0.2s;
    margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}

这将为您提供以下结果：

Click here to view screenshot

元素在页面上其他元素之后？

1 个答案: