如何与祖父设定相对位置！元件？ [英] How to set relative position with Grandfather! element?

问题描述

我的布局是这样的：

<div class='one'>
   <div class='two'>
       <div class='three'>some text</div>
   </div>
</div>

可以根据祖父元素（一个）在CSS中？

Is possible to set relative position for three according to grandfather element (one) in CSS?

查看以下内容：
http://jsfiddle.net/chalist/H48Je/

推荐答案

元素的位置为：相对，然后移动它（例如， left：20px ），它相对于其自然位置移动页面的流动，在之前的位置留出一个空隙（其他元素将无法抓住它）。因此，从某种意义上说，简单的答案是：如果给 .three 一个相对位置并将其移动，它将相对于其所有祖先移动。

When an element has position: relative and you move it (say left: 20px) it moves in relation to its natural position in the flow of the page, leaving a gap where it was before (which no other element will grab, as it were). So in a way, the simple answer is yes: if you give .three a relative position and move it, it will move in relation to all its ancestors.

通常，但是，如果要相对于祖先移动元素，通常会给祖先位置：相对和要移动的元素位置：绝对。然后任何定位（例如 top：20px ）都将与定位的祖先相关，并且要移动的元素也不会留下任何空隙。

Generally, though, if you want to move an element in relation to an ancestor, you'd normally give the ancestor position: relative and the element that's being moved position: absolute. Then any positioning (e.g. top: 20px) will be in relation to the positioned ancestor, and the element being moved won't leave a gap behind.

要注意的一件事是，此定位将与最近的定位祖先有关。因此，如果 .two 已定位，您将无法相对于<$ c $定位 .three c> .one ...（无论如何都不直接）。

The one thing to note is that this positioning will be in relation to the nearest positioned ancestor. So if .two has positioning, you won't be able to position .three in relation to .one ... (not directly, anyway).

BTW，如果元素设置为 position：绝对，并且没有祖先设置任何定位，在绝对元素上设置的任何坐标都将相对于视口。

BTW, if an element is set to position: absolute and no ancestor has any positioning set, any co-ordinates set on the absolute element will be in relation to the viewport.

这篇关于如何与祖父设定相对位置！元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！