相对定位内的绝对定位？ [英] Absolute positioning inside relative positioning?

问题描述

根据W3Schools（ http://www.w3schools.com/css/css_positioning.asp ）：

According to W3Schools (http://www.w3schools.com/css/css_positioning.asp):

相对定位的元素通常用作
绝对定位元素的容器块。

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

为什么是这样？有很好的例子吗？

Why is this? Is there a good example?

推荐答案

一个很好的例子是，当你想要定位到页面或相对一个容器/ div。

A good example would be when you want to position something to the page or "relative" to a container/div.

这是我的小提琴 http：// jsfiddle .net / doitlikejustin / RdWQ7 / 2 /

这表明没有绝对div位于相对div之内，

This shows you that without the absolute div being inside of a "relative" div, the contents are aligned to the document body.

请注意，绿色div（＃box1 ）具有位置：相对，里面的div（＃inner1 ）对齐顶部/右边＃box1 。

Notice that the green div (#box1), which has position: relative, the div inside (#inner1) it is aligned top/right INSIDE of #box1.

蓝框（＃box2 ），绿色框（＃box1 ）不包括 position：relative $ c>＃inner2 ）与正文的顶部/右侧对齐

The blue box (#box2), which has the exact same HTML layout as the green box (#box1), does NOT include position: relative and notice that the div inside it (#inner2) is aligned to the top/right of the body

#box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

---

关于它从Chris Coyier ...

---

Here is a good article about it from Chris Coyier...

一个页面元素相对定位给你控制
绝对位置children元素

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

资料来源： http://css-tricks.com/absolute-positioning-inside-relative-positioning/

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