Question

我正在为Web应用程序构建原型，但我遇到了div重叠的问题。

我有一个名为#menu的div width: 15%;，在其中，我有一个名为#list且width: 100%;的子div。

乍一看，似乎孩子 div不尊重父 div的限制，记住孩子 div有position: absolute;。

关于这个问题有一些问题，但我没有找到任何适合我案例的问题。有些问题涉及在所有div上应用clear: both或应用display: inline-block;，但没有任何效果。

非常感谢任何帮助。

<html>

  <head>

    <title> PROTOTYPE - opcion.html</title>

    <style type="text/css">

      body {
        margin: 0;
      }

      #menu {
        display: block;
        height: 100%;
        width: 15%;
        background-color:#ff0000;
      }

      #list {
        width: 100%;
        top: 180px;
        position: absolute;
      }

      ul {
        background-color: aqua;
        display: block;
        padding: 0;
        list-style: none;
      }

      li {
        margin: auto;
        width: 100%;
        padding: 10px 0px 10px 10px;
        border-bottom: 1px solid rgba(0,0,0,.6);
      }

      li a {
        color: #ffffff;
        font-size: 25px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        text-decoration: none;
      }

    </style>

  </head>

  <body>

    <div id="menu">
      <div id="list">
        <ul>
          <li> <a href="#">Customers</a> </li>
          <li> <a href="#">Students</a> </li>
          <li> <a href="#">Teachers</a> </li>
          <li> <a href="#">Android App</a> </li>
        </ul>
      </div>
    </div>

  </body>

</html>

Answer 1

只需添加位置：相对于#menu。您的绝对容器将尊重具有相对位置的父属性。

了解有关职位的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/position https://css-tricks.com/almanac/properties/p/position/

＆＃39;清除＆＃39;仅在浮动元素时才需要。

Answer 2

好的头衔。父div需要具有相对位置，以便将绝对定位元素包含在其中。将此代码添加到您的样式中：

#menu {
position: relative;
}

Answer 3

使用此：

<html>

<title> PROTOTYPE - opcion.html</title>

<style type="text/css">
    body {
        margin: 0;
    }

    #menu {
        display: block;
        height: 100%;
        width: 15%;
        background-color: #ff0000;
    }

    #list {
        width: inherit;
        top: 180px;
        position: absolute;
    }

    ul {
        background-color: aqua;
        display: block;
        padding: 0;
        list-style: none;
    }

    li {
        margin: auto;
        width: inherit;
        padding: 10px 0px 10px 10px;
        border-bottom: 1px solid rgba(0,0,0,.6);
    }

        li a {
            color: #ffffff;
            font-size: 25px;
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            text-decoration: none;
        }
</style>

<div id="menu">
    <div id="list">
        <ul>
            <li> <a href="#">Customers</a> </li>
            <li> <a href="#">Students</a> </li>
            <li> <a href="#">Teachers</a> </li>
            <li> <a href="#">Android App</a> </li>
        </ul>
    </div>
</div>

在列表css和li css中使用：

width: inherit;

子div重叠，不尊重父div宽度

3 个答案: