CSS：绝对元素内的绝对元素 [英] CSS: Absolute Element inside Absolute Element

问题描述

我在学习CSS，当我学习，当相对元素B内的绝对元素A，A将是相对于B.我想测试绝对元素内的绝对元素，但我没有看到任何差异

这是我的测试：

 < div id = box-1> 
< div id =box-2>< / div> 
< / div> 
 

绝对内

 ＃box-1 {
 width：200px; 
 height：200px; 
 background：＃000000; 
 position：relative; 
} 
 
＃box-2 {
 width：100px; 
 height：100px; 
 left：50px; 
 top：50px; 
 background：＃e2e2e2; 
 position：absolute; 
} 
  

绝对绝对

 ＃box-1 {
 width：200px; 
 height：200px; 
 background：＃000000; 
 position：absolute; 
} 
 
＃box-2 {
 width：100px; 
 height：100px; 
 left：50px; 
 top：50px; 
 background：＃e2e2e2; 
 position：absolute; 
} 
  

我的问题是：当绝对元素在其他绝对元素内部时，是否有任何差异？如果没有，为什么我已经阅读的每个例子总是只提到其他相关元素内的绝对元素？

感谢：）

绝对定位绝对元素父与相对父是绝对相同的。事实上，如果父母固定，它也是一样的。

基本上你总是会放置一个<$ c $与 NO position：static （这是所有元素的位置） 。

学习最常见的例子是 absolute 里面 code>因为当你正在做一些基本的html，你需要的第一个元素 absolute 不会被定位（可能），直到你设置相对到父级，并且不会改变这个父级的位置（从 static 到相对不会对任何元素产生任何影响）。

你可能会发现你愿意做的下一个问题是为什么不所有的元素设置为 position：relative 默认情况下，如果它不会改变html的流程，然后你保存时间不添加位置：相对到这么多类？。是的，我不理解它，直到有一天我需要一个绝对元素定位相对于不是最近的父。 （例如，与主菜单 ul 关联的绝对子菜单的位置，但不是他的直接父这将是 li ）。希望足够清楚

I'm studying CSS and as I learn, when an absolute element A inside relative element B, that A will be relative to B. I want to test the case absolute element inside absolute element but I don't see any differences.

Here is my test:

<div id="box-1">
    <div id="box-2"></div>
</div>

Absolute inside Relative

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: relative;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

Absolute inside Absolute

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: absolute;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

So. my question is: Are there any differences when an absolute element is inside other absolute element ? If not, why every examples that I have read always just mention the case absolute element inside other relative element ?

thanks :)

解决方案

Positioning an absolute element in relation to an absolute parent is "absolutely" the same as with a relative parent. In fact it's also the same if the parent were fixed.

Basically you will always position an absolute element in relation with the closest parent with NO position:static (which is the position of all elements by default).

While learning the example most common is absolute inside relative because while you are making some basic html, the first element you need to be absolute won't be positioned (probably) as you wish till you set relative to the parent and that won't change the position of this parent at all (from static to relative shoudn't make any difference on any element).

Probably your next question you may find willing to do is "why not all the elements are set to position:relative by default if it won't change the flow of the html at all and then you save time not adding position:relative to so many classes?". Yes, I coudn't understand it either till some day I needed an absolute element to be positioned in relation to NOT the closest parent. (for example, a position of an absolute submenu on relation to the main-menu ul but not to his direct parent which would be a li). Hope it's clear enough

这篇关于CSS：绝对元素内的绝对元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！