为什么我的内容超出了我的标题？

Question

所以这只是我页面的一部分，当我将标题位置设置为固定时，我很困惑为什么我的内容会在我的标题之上和之下？

Here is my code:

https://jsfiddle.net/CheckLife/nod19rze/2/

Here is a better picture of whats going on, its a screenshot:

http://imgur.com/a/pcM6P

Answer 1

对于absolute和fixed位置元素，您需要使用填充来占用空间，因为这些元素不会采用任何布局。在你的情况下，我建议使用填充容器

.container {
  padding-top: 170px; //it should be more than or equal to header height
}

我还建议使用更高的z-index作为标题，以便它始终位于顶部。

.header {
  z-index: 9;
}

这里是更新的小提琴https://jsfiddle.net/nod19rze/9/

Answer 2

图像有一个position: relative，这意味着图像将采用相对于具有position:absolute的最近父元素的位置。

它与标题指定的position: fixed无关。

这是一个例子。 https://jsfiddle.net/voaxhmu2/

蓝色div相对于红色div定位。因此，指定top: 30px; left:10px会将蓝色div与红色div的位置偏移10和30像素

您可以增加偏移的值以满足您的需求，但这实际上并不是一个好习惯。相反，您可以删除position: absolute和position: relative并使用bootstrap定位它们。它更容易。

Answer 3

我认为您正在尝试制作固定顶级菜单。如果是这样的话。你可以按照下面的代码。我之前编辑过您的代码。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header,
nav,
section,
aside,
footer,
article {
  display: block;
}

body {
  background-image: url(backwood.png);
  width: 100%;
  margin: auto;
}

.container {
  margin-top: 190px;
  background-size: cover;
  width: 1300px;
  height: 100%;
}

.header {
  overflow: hidden;
  position: fixed;
  z-index: 2;
  top: 0;
  background: linear-gradient(to right, #5092f4, #f29641);
  margin-top: 0px;
  width: 100%;
}

.header h1 {
  text-align: center;
  width: 100%;
  padding-bottom: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4ca1f;
}

.clear {
  clear: both;
}

.tmacw {
  display: inline;
  position: relative;
  padding: 0px;
  top: 5px;
}

.nba {
  margin-right: 10px;
}

.thenav {
  background-color: #7886a3;
  width: 100%;
  height: 85px;
  position: relative;
  z-index: 1;
}

.logo {
  float: left;
}


/* Style for the Nav Bar */

.thenav ul {
  padding: 0;
  margin: 0;
}

.thenav ul li {
  float: left;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
  position: relative;
}

.thenav ul li a {
  display: block;
  color: white;
  font-weight: bold;
  padding: 33px 10px;
}

.thenav ul li a:hover {
  background-color: #47e586;
  transition: all 0.90s;
}


/*Dropdown Nav */

.thenav li ul li {
  background-color: #7886a3;
  border: 2px groove grey;
  border-radius: 4px;
  position: relative;
}

.thenav li ul li a {
  padding: 8px;
  text-align: left;
}

.thenav li ul li:nth-child(1) a:hover {
  background-color: #F47575;
}

.thenav li ul li:nth-child(2) a:hover {
  background-color: #f7d759;
}

.thenav li ul li a:hover {
  background-color: red;
}

.thenav ul li ul {
  display: none;
}

.thenav li:hover ul {
  position: absolute;
}

.thenav li:hover ul {
  display: block;
}


/* End of Dropdown */

.userlogin {
  font-size: 12px;
  top: 2px;
  color: white;
}

input[type=text],
input[type=password] {
  font-weight: bold;
  margin: 0;
  font-size: 8px;
  height: 10px;
  padding: 3px 5px 3px 5px;
  color: 162354;
}


/* Stats Button */

.stat input[type=button] {
  background-color: #6cd171;
  color: blue;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  padding: 2px 2px;
  font-family: Verdana, Geneva, sans-serif;
}

.log[type=button] {
  background-color: white;
  color: #008cff;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  padding: 1px 2px 2px 2px;
  position: relative;
  left: 5px;
  top: 3px;
}

.tracy {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}

.img-container {
  float: left;
  height: 220px;
  width: 206px;
  position: relative;
}

.fade-img {
  float: left;
  top: 0;
  bottom: 0;
  position: absolute;
  transition: opacity 2s ease-out;
  transition-delay: 3s;
}


/* Tmac Pic */

.main {
  background-color: #f7f4f4;
  margin-right: 480px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;
}

.tmacLogo {
  top: 12px;
  left: 0px;
}

hr {
  margin-bottom: 8px;
}

.main h1 {
  text-align: center;
  background-color: #ea5663;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size: 30px;
  letter-spacing: 2.5px;
}

.main p {
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
}


/* End of Main */

＆＃13;

<body>
  <div class="header">
    <h1 id="box">
      <image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
    <div class="thenav">
      <img src="nba-logo-on-wood.jpg" alt="My Layout Logo" width="100px" height="85px" class="logo">
      <nav class="top">
        <ul>
          <li><a href="http://www.nba.com">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Players</a>
            <ul>
              <li><a href="#">T-Mac <img src="tmacw.png" width="25px" height="20px" class="tmacw"></a></li>
              <li><a href="#kobesec">Kobe</a></li>
              <li><a href="#">Kevin Durant</a></li>
              <li><a href="#">The Goat</a></li>
            </ul>
          </li>
          <li><a href="#">News</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="clear"> </div>
  <div class="container">
    <div class="main">
      <h1>T-Mac <img src="tmacw.png" alt="TmaC" width="64px" height="44px" class="tmacLogo"></h1>
      <hr style="color:red;">
      <div class="img-container">
        <img src="tmac.jpg" alt="TmaC" width="175px" height="220px" class="tracy fade-img">
      </div>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
        PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
        and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release. It has survived not only
        five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
        like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.
      </p>
    </div>
  </div>
  <div class="cleartwo"></div>
</body>

＆＃13;

＆＃13;

＆＃13;

固定位置表示元素相对于浏览器窗口定位。

您可以在W3Schools

上查看有关HTML元素位置说明的详情

如果有关于我的更多问题，请随时问我。