绝对定位 - 获取父级的宽度

Question

任何机构都可以解释我的输出，我的代码正在产生，因为它让我疯了，没有语法错误，我正在按照教程在你管上，我能够生成与此相关的权利代码，但今天我决定完全理解这段代码，并且它让我发疯了

**注意：没有语法错误，只是寻找有关输出的说明，请阅读代码中的注释

首先看一下代码html **

 <html>
        <head>
            <title>TODO supply a title</title>
            <link rel="stylesheet" href="menu.css"></link>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
        <label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" >

        <ul id="menu">
        <li ><a href="">Home</a></li>
    //This section is giving me trouble, please see below i explain my problem in detail there
        <li ><a href="">about</a>
        <ul class="hidden">
        <li ><a href="">who are we</a></li>
        <li ><a href="">what we do</a></li>
        </ul>
        </li>
        //This section is giving me trouble, please see below i explain my problem in detail there.
        <li ><a href="">portfolio</a>
        <ul class="hidden">
        <li ><a href="">photography</a></li>
        <li ><a href="">web &amp; interface design</a></li>
        <li ><a href="">illustration</a></li>
        </ul>
        </li>
        <li ><a href="">news</a></li>
        <li ><a href="">contacts</a></li>
        </ul>

        </body>
    </html>

这是我的css

 /*strip styling from the list*/

    ul{
        margin:0;
        padding:0;
        list-style-type:none;
        position:absolute;
    }


    li{
        display:inline-block;
        float:left;
        margin-right:1px;
    }
//only this section of the code is driving me crazy, and in the explanation i type this section again and again. Please see below in there i explain my problem in detail. 
    li a {
        display:block;
        }

问题如果您查看此链接中的输出 https://codepen.io/arif_suhail_123/pen/pwdYXp

我对此感到困惑 - 查看关于部分，我期待我们是谁和我们做什么，作为块元素出现，因为我给了li a {display:block}但它们不是，它们显示为内联块元素或内联元素，我不确定，

但是当我看到下一部分投资组合时，我感到更加困惑，因为在那里，所有的li都显示为块元素，意味着摄影， web ＆安培;在提供此样式li a {display:block}

之后，我接受的下一行显示界面设计和插图

之后，当我添加 min-width属性时，我完全忘记了看到链接https://codepen.io/arif_suhail_123/pen/ZyaZEj我没有改变任何内容，我只添加了 li a {} min-width，所以我的风格是li a {display:block; min-width:140px;}

我仍然有问题，我们做什么出现在投资组合中，这个问题我已经描述过（在最后一段），但是在添加min-width：140px之后;我有新问题;如果你看看输出， web＆amp;界面设计出现在新闻中，首先我没想到它会出现在那里，其次如果你阅读html代码网络＆amp;界面设计是第二个li意味着它出现在这个顺序第一个li - 摄影，而不是第三个li - 插图和第二个li - web＆amp;设计，根据新闻 ??

任何人都可以解释一下， 以及最后， 我对绝对定位的理解 就是这样，它将元素从正常流程中取出并将其放回原处在给定的位置，我举了一个例子，它确认我认为可能是我错了但看起来https://codepen.io/arif_suhail_123/pen/LLOaXv 在这个链接上没有出现第三个框，正如我所期待的那样，没有出现， 以及关于块元素 ，我知道他们认为会出现在新行上。

看到这两张照片我觉得我的问题会变得更加明确。

Answer 1

绝对定位 - 获取父级的宽度

好的，所以我查看了你的代码，我做了一个小例子。我拿出一些东西来使例子更清晰（并且由于这些帖子的宽度限制）。

好的，首先，查看我在<ul>列表中放置的背景颜色。您的子列表为红色。您的主<ul>为黄色。

现在你说position: absolute;从＆＃34;流＆＃34;中取出元素是正确的。其他元素，以便像往常一样显示它们。绝对定位需要特别注意。

运行代码并查看单词＆＃34;我们是谁＆＃34;。现在这让你想到，为什么＆＃34;拍摄＆＃34;出现在旁边？发生了什么＆＃34;我们做了什么＆＃34;？它背后。发生这种情况的原因是因为这两个列表都位于其父元素的绝对位置。如果不提供top或left之类的内容，它们就会相互重叠，后者最终显示在上一个列表的顶部。绝对定位的元素并不关心它们旁边的内容或它们是否重叠。他们去你告诉他们的地方，这通常是绝对定位的目的。你告诉它要脱离正常流量，你给它一个特定的位置来显示。

使用代码，删除＆＃34;摄影＆＃34;和＆＃34;插图＆＃34;并再次运行它。你会看到＆＃34;我们做什么＆＃34;一直都在那里，就在它后面。

另见Russell's答案。

＆＃13;

ul{
  margin:0;
  padding:0;
  list-style-type:none;
  position:absolute;
  background-color: yellow;
}

ul ul{
  display: block;
  padding: 5px;
  background-color: red;
}

#secondList{
  background-color: pink;
}

ul li{
  float:left;
  margin: 5px;
  width: 120px;
}

ul ul li a{
  display: block;
}

＆＃13;

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">about</a>
    <ul class="hidden">
      <li><a href="">who are we</a></li>
      <li><a href="">what we do</a></li>
    </ul>
  </li>

  <li ><a href="">portfolio</a>
    <ul class="hidden" id="secondList">
      <li><a href="">photography</a></li>
      <li><a href="">illustration</a></li>
    </ul>
  </li>
  <li><a href="">news</a></li>
</ul>

＆＃13;

Answer 2

我对此感到困惑 - 看看关于部分，我期待我们是谁以及我们做了什么，看起来像块元素，因为我给了他一个{display：block}但是他们没有，他们出现了作为内联块元素或内联元素，我不确定，

它们看起来像块元素。我认为问题是＆＃39;是你有li声明为内联块元素。因此，您将容器中的块元素设置为内联块，这有效地使它们显示为内联块。

但是当我看到下一部分组合时，我会变得更加困惑，因为在那里，所有的li都显示为块元素，意味着摄影，网络＆amp;界面设计和插图出现在下一行，我接受了，在给出这种风格之后

显示相同，但您输入的笔具有分配给它的某种任意宽度。我不确定它是否是因为视口设置，但是请尝试缩短部分链接名称，并且您会看到它实际显示的内容与其他列表相同。 IE inline-block就像指定的一样。

任何人都可以解释一下，最后，我对绝对定位的理解是，它将元素从正常流动中取出，并将其放回给定位置

绝对定位将元素从正常流量中移出，并将其相对于第一个定位父元素定位。浏览器也没有为元素留出空间。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

如果我理解这个问题，我不是百分百确定，但我会试一试：

position: absolute;

使元素忽略每个元素。这就是让他们在彼此之上的原因。它只显示你告诉它显示的内容。 Wich默认位于左上角。这也是为什么有

的原因

z-index: ...;

z-index表示元素显示在哪个层上，例如z-index：-10;使它在第10层上，一个带有z-index -9的元素会显示在顶部我认为（非常肯定，否则相反）有无限层btw

希望这就是你要找的东西

绝对的定位让我疯狂

3 个答案:

绝对定位 - 获取父级的宽度