Question

据我所知，如果我用一个带有绝对位置的div的相对位置包裹一个外部div，那么内部div的绝对定位将相对于外部div（duh）。

然而，当我这样做时：

<div class="outer">
  <div class="inner"> </div>
</div>

CSS：

 .outer {
 margin: 0 auto;
 padding: 20px;
 width: 700px; }

.inner {
position: absolute;
text-decoration: none;
cursor: pointer; 
bottom: 20px;
left: 5px;}

它使内部与浏览器窗口对齐，而不是相对div！我对这个简单的概念感到非常难过，我以前能够做到这一点，但我必须做错事。

以下是完整的jsfiddle：http://jsfiddle.net/DDYUK/1/

Answer 1

.outer永远不会获得CSS属性position:relative

.outer { 
    position: relative;
    margin: 0 auto; 
    padding: 20px; 
    width: 700px; 
}

Answer 2

如果您不将position:relative;应用于.outer div，则默认为position:static。绝对定位的div将相对于相对定位的最近父母定位。如果没有，它将相对于页面本身定位。

Answer 3

更新css here fiddle demo

我在你的jsfiddle中更新

在外部div中使用relative

.twitter-box {
  margin: 0 auto;
    position:relative;
  padding: 20px;
  width: 700px; }

  .twitter-box p {
    text-decoration: none;
    display: inline;
    position: absolute;
    margin-top: 69px; }

  .twitter-box img {
    height: 150px;
    width: 150px;
    text-align: center;
    margin: 0 auto; }

  .twit {
    position: absolute;
    text-decoration: none;
    cursor: pointer; 
    bottom: 20px;
    left: 5px;}

为什么我的位置：绝对<div>与父母的位置无关？</div>

3 个答案: