Question

是否可以将绝对位置div置于相对潜水中，且边距为0？

HTML：

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

CSS：

.outer{
  background: red;
  margin: 0 auto;
  width:100px;
  height:100px;
}

.inner{
  position:absolute;
  width:20px;
  height:20px;
  background:blue;
  top:10px;
  left:10px;
}

我希望绝对定位可以在外部确定，但我想是边际。上面的代码可以在这里看到：http://jsfiddle.net/g4y4czff/

理想情况下，我想使用css来解决这个问题，但我认为更有可能成为js解决方案。

任何想法都非常感激。

C

Answer 1

新小提琴：http://jsfiddle.net/g4y4czff/1/

只需将position: relative添加到.outer

即可

原因是因为默认position属性为static

Answer 2

因为你想让它居中，所以你也可以水平和垂直居中。将position:absolute;放在position:relative;内可以让它在其中。

http://jsfiddle.net/g4y4czff/3/

.outer{
    background: red;
    margin: 0 auto;
    width:100px;
    height:100px;
    position:relative;
}

.inner{
    position:absolute;
    width:20px;
    height:20px;
    background:blue;
    top:0;
    margin: auto;
    left:0;
    right:0px;
    bottom:0;
}

相对于保证金的绝对位置

2 个答案: