时间戳

首页 > 解决方案 > 绝对位置 div 内的绝对位置 div。如果外部 div 不是位置：相对，它是如何工作的？

html - 绝对位置 div 内的绝对位置 div。如果外部 div 不是位置：相对，它是如何工作的？

问题描述

据我了解，如果我们执行以下操作：

<div id="Outer">
    <div id="Inner"></div>
</div>

外部 div 的位置是相对的，内部的位置是绝对的，那么我们可以将内部的位置放置在“外部 div”（顶部/左侧/底部等）内的任何我们想要的位置。

在我试图弄清楚位置元素如何工作时，我尝试设置以下构建：

  1. 外分区。
  2. 外部 div 内部的内部 div。
  3. 内部 div 内部 div 内部。

我所做的更改是将内部 div 的位置更改为绝对，即使内部内部 div 是绝对的，并且它的父级是绝对的，我仍然能够定位内部内部 div。我试图了解我是如何以及为什么能够做到这一点的。我的意思是，父 div (div number 2) => 不是 position: relative; 但它是位置：绝对；然而，我已经成功地定位了内部内部 div，就像您在父级为 position: relative 时定位一样。

很高兴听到有关此特定设置为何起作用的解释。这是完整的代码：

<html>
<head>
<style type="text/css">
.OuterDiv {
    padding: 0px;
    margin: 0px auto 0px auto;
    width: 500px;
    height: 300px;
    background-color: #E6E6E6;
    overflow: hidden;
    position: relative;
}
.InnerDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 200px;
    height: 200px;
    background-color: #D3DEEF;
    overflow: hidden;
}
.InnerInner {
    position: absolute;
    top: 20px;
    right: 20px;
    overflow: hidden;
}
</style>
</head>
<body>
<div class="OuterDiv">
    <div class="InnerDiv">
        <div class="InnerInner">Inner Inner</div>
    </div>
</div>
</body>
</html>

标签： htmlcssposition

解决方案

如果position: absolute;父元素的位置不是静态的，则元素将相对于其父元素定位。（它可以是绝对的、相对的等，但不是静态的）

推荐阅读