gpt4 book ai didi

html - 绝对位置 div 内的绝对位置 div。如果外部 div 不是位置 : relative?,它如何工作

转载 作者:行者123 更新时间:2023-11-28 16:03:19 25 4
gpt4 key购买 nike

据我了解,如果我们执行以下操作:

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

外部 div 的位置是相对的,内部的位置是绝对的,那么我们就可以将内部的放置在我们想要的任何地方,基本上在“外部 div”(顶部/左侧/底部等)内。

在我试图弄清楚 position 元素如何工作的过程中,我尝试设置以下构建:

  1. 外层
  2. 内部 div 在外部 div 中。
  3. 内部div里面的内部div。

我所做的改变是将内部 div 的位置设置为绝对,即使内部内部 div 是绝对的并且它的父级是绝对的,我仍然能够定位内部内部 div。我试图理解我是如何以及为什么能够做到这一点的。我的意思是,父 div (div number 2) => 不是 position: relative;但它是 position: absolute;然而,我已经成功定位了内部内部 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>

最佳答案

position: absolute; 元素将相对于其父元素定位,如果父元素的位置不是是静态的。 (它可以是绝对的,相对的等等,但不是静态的)

关于html - 绝对位置 div 内的绝对位置 div。如果外部 div 不是位置 : relative?,它如何工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53557277/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com