相对和绝对定位如何与嵌入式div一起工作？ [英] How does relative and absolute positioning work with embedded divs?

问题描述

我需要在 div 中放置 div ，我变得疯狂。我在网上读了很多文档，但我仍然不清楚相对和绝对的行为 div 已嵌入。

有人 ：

ve找到理解绝对定位是
位置：相对看起来下游到子元素和
位置：绝对看起来上游到父元素。也就是说，当
你告诉一个HTML元素是绝对定位的，它将
看起来up到其父元素，直到找到一个设置为
position：relative，和将基于这一点定位自己。如果
没有找到，它将默认相对于
的位置。

这是正确的所有浏览器？这是一个完整的解释吗？

我的问题是我有几个 div 嵌入几个 div 。我需要在父级 div 中以高精度定位一些子 div （例如top 33，left 9） 。父 div 可嵌入到父母 div 中，也具有高精度等...

如何解决所有浏览器的这个问题？我应该创建一个超级相对父 div ，其中 div 应位于绝对？

EDIT

从当前的答案，我有一个额外的问题：是否必须显式声明一个相对或绝对在每个 div 中的位置以使定位工作？换句话说，如果div没有相对或绝对位置，则在计算时不会考虑

上述问题的答案是yes 。

解决方案

我觉得这样更容易理解：

如果项目 position：relative ，则顶部，底部，左侧，右侧位置的任何样式设置都是相对于项目在正常布局流程中的位置。所以：

  position：relative; 
 top：10px; 
 

将项目推送到比正常HTML布局中低10px。

如果一个项目是 position：absolute ，那么它相对于任何最接近的父项 position：relative 或 position：absolute 或相对于body元素。例如，如果直接父节点是position：relative，子节点是：

  position：absolute; 
 top：10px; 
 left：10px; 
  

然后，对象将从左上角向下定位10px父母。当对象是 position：absolute 时，它将从页面布局中删除，并且不会影响任何其他对象（除了它自己的子对象）的布局。 p>

例如，如果你想在容器对象中放置三个图像，你可以在幻灯片中循环遍历它们，这个CSS：

  .container {position：relative; height：100px; width：133px;} 
 .container img {position：absolute; top：0; left：0;} 
  

I need to position divs within divs, and I am getting crazy. I've read many docs on the net, but I am still not clear about behavior of relative and absolute positioning when divs are embedded.

Someone came up with the following:

The best way I've found to understand absolute positioning is that position:relative looks "downstream" to child elements and position:absolute looks "upstream" to parent elements. That is, when you tell an HTML element to be absolutely positioned, it's going to look "up" to its parent elements until it finds one that is set to position:relative, and will position itself based on that. If it doesn't find one, it will position itself with respect to the by default.

Is this correct for all browsers? Is this a complete explanation?

My issue is that I have several divs embedded in several divs. I need to position some child div within a parent div, with high precision (for example top 33, left 9). The parent div can be embedded in a grand-parent div, with high precision too, etc...

How does one solve this issue for all browsers? Should I create a super relative parent div from which the whole hierarchy of div should be positioned as absolute?

EDIT

From current answers, I have an extra question: does one have to explicitly declare a relative or absolute position in each div to make positioning work? In other words, if a div does not have a relative or absolute position, it is not taken into account when computing positions?

FOR THE RECORDS

The answer to the above question is yes.

解决方案

I find it a little easier to understand this way:

If an item is position: relative, then any style settings for top, bottom, left, right positions are relative to where the item would have been in the normal layout flow. So:

position: relative;
top: 10px;

pushes an item 10px down lower than it would have otherwise been in the normal HTML layout.

If an item is position:absolute, then it is positioned relative to whatever the closest parent that is position: relative or position: absolute or relative to the body element if no parents meet that criteria. For example, if the immediate parent is `position: relative' and the child is:

position: absolute;
top: 10px;
left: 10px;

Then, the object will be positioned down and to the right by 10px from the upper left corner of the parent. When an object is position: absolute, it is removed from the layout of the page and it does not affect the layout of any other objects (except it's own children).

As an example, if you want to position three images on top of one another in a container object (perhaps so you can cycle through them in a slideshow, you would do so with this CSS:

.container {position: relative; height: 100px; width: 133px;}
.container img {position: absolute; top: 0; left: 0;}

这篇关于相对和绝对定位如何与嵌入式div一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！