Question

我有一个名为菜单的div，我有另一个div称为内容，这两个div位于一个名为容器的div内，以保持它们的位置。我尝试在内容div中添加一个名为text-box的div，但不知何故，这个div被放置在菜单div中！我希望文本框div放在内容div中，而不是放在菜单中。

代码（https://jsfiddle.net/9xh3xdon/1/）：

/*Global*/
* {
  margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: absolute;
}
#headcontainer {
  width: 100%;
  height: 100vh;
  background-color: pink;
}

/* navigation */
#menu {
  height: 100px;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.1);
  position: absolute;
  max-height: 100px;
  margin-top: 100vh;
  border: 1px solid black;
  border-top: none;
}
#menu li {
  display: inline-block;
  text-decoration: none;
  padding-left: 20px;
  position: relative;
}
#menu ul {
  float: right;
  height±: 100%;
  width: auto;
  line-height: 100px;
}
#menu ul li {
  padding-right: 20px;
}
#menu ul li:hover {
  cursor:pointer;
  color: white;
}
#logo {
  height: 40px;
  width: 200px;
  background-color: red;
  float: left;
  margin-top: 0px;
  margin-top: 30px;
  margin-left: 20px;
}

/*content*/
#content {
  width:100%;
  height:auto;
  min-height:500px;
  position: relative;
}
.text-box {
  width:200px;
  height:auto;
  background-color:blue;
  min-height:100px;
}

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <title>random</title>
    <!--   <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
  </head>
  <body>
    <div id="container">
      <div id="headcontainer">
        <div id="menu">
          <div id="logo">
            <p>Hier komt een logo</p>
          </div>
          <ul>
            <li>Home</li>
            <li>Over</li>
            <li>Contact</li>
            <li>Producten</li>
          </ul>
        </div>
      </div>
      <div id="content">
        <div class="text-box"></div>
      </div>
    </div>
  </body>
</html>

Answer 1

在您提供的示例中，.text-box在元素#content中呈现 - 它似乎位于#menu内部，因为此元素已定位{{1}将从文档的自然流程中取出。
向absolute div声明margin-top值，等于或大于#content的高度将纠正此

<强> CSS

#menu

Answer 2

新css，

/*Global*/

    * {
        margin: 0px;
    }

    body {}

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {}

    h1 {}

    h2 {}

    h3 {}

    h4 {}

    a {}

    img {}

    #container {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        position: absolute;
    }

    #headcontainer {
        width: 100%;
        /*height: 100vh;*/
        height: 100px;
        background-color: pink;
    }
    /* navigation */

    #menu {
        height: 100px;
        width: 100%;
        background-color: rgba(0, 0, 255, 0.1);
        /*position: absolute;*/
        max-height: 100px;
        /*margin-top: 100vh;*/
        border: 1px solid black;
        border-top: none;

    }

    #menu li {
        display: inline-block;
        text-decoration: none;
        padding-left: 20px;
        position: relative;
    }

    #menu ul {
        float: right;
        height±: 100%;
        /*width: auto;*/
            width: 68%;
        line-height: 100px;
    }

    #menu ul li {
        padding-right: 20px;
    }

    #menu ul li:hover {
        cursor:pointer;
        color: white;
    }

    #logo {
        height: 40px;
        /*width: 200px;*/
        width: 20%;
        background-color: red;
        float: left;
        margin-top: 0px;
        margin-top: 30px;
        margin-left: 20px;
    }

    /*content*/
    #content {
    width:100%;
    height:auto;
    min-height:500px;
    position: relative;

    }

    .text-box {
    width:200px;
    height:auto;
    background-color:blue;
    min-height:100px;

    }

从#menu移除position: absolute;和position: absolute;以及移除#headcontainer height: 100vh;并添加height: 100px;。

同样来自#menu ul已删除width: auto;，已添加width: 68%;以及#logo已移除width: 200px;，已添加width: 20%;。

您可以根据您的要求更改我添加的% width和其他css值...这只是解决问题的一个想法。

Div没有正确定位

2 个答案: