CSS绝对定位，使div的左上角位于父元素的右上角

Question

我想将一个div绝对定位，使其左上角与父div的右上角相连（相对定位）。

你有任何解决方法吗？

这里是一个开始的示例： fiddle。

- Ashwin

---

发布你的代码和/或开始一个 jsfiddle。 - Lowkase

兼容性问题？如果您想让它在< IE8中工作，我建议使用JavaScript。否则，请使用HTML5计算。 - Ron van der Heijden

好的。让我放一个小样例。 - Ashwin

Answer 1

我认为你想要的是这样的：

http://jsfiddle.net/kdcmq/

<div id = "parent">
     <div id = "child"></div>
</div>


#parent {
    position: relative;
    width: 500px;
    height: 500px;
    background: red;
    display: block; /* fix for opera and ff */
}

#child {
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    top: 0;
    left: 100%; /* this line of code will sort things out for you :) */
}

- madeye

---

如果父元素不是<div>（而是span或其他内联元素），请不要忘记为Opera（Presto）和FF添加display:block。 - Ivan Black

你能解释一下为什么父元素的定位应该是相对定位吗？ - Mohib

Answer 2

就这么简单吗？

http://jsfiddle.net/ZeSF8/2/

CSS：

div {border:1px solid #000}
.p {
    position:relative;
    width:100px; /*width will be unknown*/
    height:80px;
    background:#999;
}

.c {
    position:absolute;
    width:40px;
    height:30px;
    background:red;
    top:0;
    left:100%;
}

​ HTML:

<div class="p">
    <div class="c"></div>
</div>​

- silentw