当它们的位置是绝对/固定时，为什么元素不在体内？ [复制]答案

【问题标题】：Why are the elements not inside of the body when their positions are absolute/fixed? [duplicate]当它们的位置是绝对/固定时，为什么元素不在体内？ [复制]
【发布时间】：2019-03-06 19:58:40
【问题描述】：

我将body 的位置设置为relative，然后我尝试定位#first 和#second 元素相对于它们的父元素，即body。

我的问题是为什么#first 元素不在body 内，而它们的位置是绝对/固定的？

body {
  margin: 0;
  padding: 0;
  border: solid red;
  position: relative;
}

#first {
  position: fixed;
  left: 0;
  top: 200px;
  border: solid green;
}

#second {
  border: solid blue;
  height: 200px;
  padding: 100px;
  position: absolute;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <section id="first"></section>
  <section id="second"> </section>
</body>

</html>

【问题讨论】：

它们都是，你的#first div 只是没有设置高度和宽度。
固定位置不服从父级。当页面滚动时，它只是停留在一个地方。
jsfiddle.net/nuz5k3op/9 - - 他们是……
请加html,body{ min-height:100vh}
当使用position: fixed 时，元素是相对于视口定位的，而不是相对于任何其他元素，因此您的代码可以正常工作。

标签： html css css-position

【解决方案1】：

我想我明白问题所在了。上面的注释是正确的，如果添加高度和宽度，则更容易看到元素。

要考虑的另一件事是设置元素位置时创建的 z-index 上下文。

不设置z-index，第一个元素在body里面，但是在第二个元素后面。查看下面的链接。

https://jsfiddle.net/rollinglex/s1Ltf93n/2/

body {
  margin: 0;
  padding: 0;
  border: 1px solid red;
  position: relative;
  height: 80%;
  background-color: yellow;
  z-index: 1;
  }

          #first {
            position: absolute;
            left: 0;
            top: 200px;
            height: 50px;
            width: 50px;
            border: 1px solid green;
            background-color: green;
            z-index: 100;
          }

          #second {
            background-color: blue;
            border: 1px solid blue;
            height: 200px;
            padding: 100px;
            position: absolute;
            z-index: 10;
          }

希望这会有所帮助！

【讨论】：

这个问题与z-index 无关，它只是按预期工作，所以这个答案不会以任何方式增加或帮助。
对不起，我发布了错误的 jsfiddle 链接。在问题中，提问者想知道为什么第一个元素不在 body 元素内。显然，它是。但是当给定第一个元素的高度和宽度时，它会隐藏在第二个元素的后面。这可能是提问者看不到该元素的原因。所以增加第一个元素的z-index值会清楚地表明它在body中。查看我更新的小提琴并删除第一个元素的 z-index 以使其消失。