Question

所以情况就是这样，我实际上希望 h2 低于h1 ，但 坐在它上面 ..并且我不希望它被添加到相同的标题部分，我希望它有像我创建的单独部分＆＃34; content-section ＆＃34;我知道position:absolute;导致问题如何解决这个问题..如果我打扰了positon属性它会影响我的 Nav-section 那么现在该怎么办？需要帮助

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}


/* HEADER SECTION*/

.header-section {
  font-family: monospace;
  font-size: 25px;
  position: absolute;
}


/* HEADING */

h1 {
  display: inline;
}


/* Nav-section */

.nav-section {
  float: right;
  clear: both;
  position: relative;
  left: 80%;
}

.nav-section li {
  display: inline-block;
  margin: 20px;
}


/* BACKGROUND IMG */

body {
  background: url("coffee.jpg") no-repeat;
  background-size: cover;
}


/* CONTENT - SECTION */

.Content-section {}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>journey</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <header class="header-section">
    <h1>
      journey
    </h1>
    <ul class="nav-section">
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </header>

  <header class="Content-section">
    <h2>
      Welcome to my world<br> where it all Began...
    </h2>
  </header>
</body>

</html>

＆＃13;

Answer 1

将padding-top属性添加到.Content-section。喜欢这个

.Content-section {
  padding-top: 80px;
}

您可以将padding-bottom更改为exact height of your .header-section。

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}


/* HEADER SECTION*/

.header-section {
  font-family: monospace;
  font-size: 25px;
  position: absolute;
}


/* HEADING */

h1 {
  display: inline;
}


/* Nav-section */

.nav-section {
  float: right;
  clear: both;
  position: relative;
  left: 80%;
}

.nav-section li {
  display: inline-block;
  margin: 20px;
}


/* BACKGROUND IMG */

body {
  background: url("coffee.jpg") no-repeat;
  background-size: cover;
}


/* CONTENT - SECTION */

.Content-section {
  padding-top: 80px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>journey</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <header class="header-section">
    <h1>
      journey
    </h1>
    <ul class="nav-section">
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </header>

  <header class="Content-section">
    <h2>
      Welcome to my world<br> where it all Began...
    </h2>
  </header>
</body>

</html>

＆＃13;

Answer 2

一种方法是使用“填充程序”，它将充当position:absolute的块容器。这没有响应，因为您需要使用固定的高度值。

* {
  padding: 0px;
  margin: 0px;
}


/* HEADER SECTION*/

.header-section {
  font-family: monospace;
  font-size: 25px;
  position: absolute;
  height: 100px;
  /*need a fixed height*/
}

#filler {
  height: 100px;
  width: 100%;
  background-color: blue;
}


/* HEADING */

h1 {
  display: inline;
}


/* Nav-section */

.nav-section {
  float: right;
  clear: both;
  position: relative;
  left: 80%;
}

.nav-section li {
  display: inline-block;
  margin: 20px;
}


/* BACKGROUND IMG */

body {
  background: url("coffee.jpg") no-repeat;
  background-size: cover;
}


/* CONTENT - SECTION */

.Content-section {}

<body>
  <header class="header-section">
    <h1>
      journey
    </h1>
    <ul class="nav-section">
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </header>
  <div id="filler"></div>
  <header class="Content-section">
    <h2>
      Welcome to my world<br> where it all Began...
    </h2>
  </header>
</body>

Answer 3

您只需向padding-top

添加.Content-section即可

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}


/* HEADER SECTION*/

.header-section {
  font-family: monospace;
  font-size: 25px;
  position: absolute;
}


/* HEADING */

h1 {
  display: inline;
}


/* Nav-section */

.nav-section {
  float: right;
  clear: both;
  position: relative;
  left: 80%;
}

.nav-section li {
  display: inline-block;
  margin: 20px;
}


/* BACKGROUND IMG */

body {
  background: url("coffee.jpg") no-repeat;
  background-size: cover;
}


/* CONTENT - SECTION */

.Content-section {
padding-top: 80px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>journey</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <header class="header-section">
    <h1>
      journey
    </h1>
    <ul class="nav-section">
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </header>

  <header class="Content-section">
    <h2>
      Welcome to my world<br> where it all Began...
    </h2>
  </header>
</body>

</html>

＆＃13;

我的h2坐在h1之上，如何将它降到h1以下？

3 个答案: