Question

我在网站顶部的空格（或栏）出现了一些问题。

我尝试过使用其他值提示的填充和位置值，但似乎没有任何效果。

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

Answer 1

您应该在正文中添加页边距0

css

body{
background: #fff;
margin: 0;
}

Answer 2

由于已将position: absolute赋予img，因此应指定图像的位置。

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
  top: 0; /* added position */
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

Answer 3

只需将top:0;添加到img标签。

h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}

h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}

img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; 
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>

</html>

避免使用position:absolute;。 绝对定位的元素不了解它们周围发生的事情。当页面更改大小时，这些元素不会相对于彼此移动，而是相对于其容器和您设置的值而移动顶部，左侧等

了解更多信息：https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

在您的情况下，只需将该图像作为分隔的背景，然后将文本h1，h2放在分隔内，并在h1，h2上添加填充（如果需要）即可对齐

。

如何删除顶部的白条？

3 个答案: