html - CSS 相对应忽略所有子，相对于父

Question

我喜欢做一些没有浮动的定位。有没有办法获得位置：相对；相对于父母，忽略所有其他孩子。不能使用absolute，因为父级不是。

.myDiv
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    padding: 0px;
    width: 100px;
    height: 100px;
    background-color: grey;
}

.myDiv1
{
    background-color: green;
    width: 10px;
    height: 10px;
    position: relativ;
    top: 20px;
    left: 10px;
    display: inline-block;
}

.myDiv2
{
    background-color: red;
    width: 10px;
    height: 10px;
    position: relativ;
    top: -20px;
    left: 30px;
    display: inline-block;
}

.myDiv3
{
    background-color: black;
    width: 10px;
    height: 10px;
    position: relativ;
    top: -50px;
    left: 50px;
    display: inline-block;
}

不像例外： http: //jsfiddle.net/VLk6m/16/（所有孩子都在同一个顶部位置）

Answer 1

1. 这不是relativ它relative。
2. position: absolute如果他们的父母有，您可以使用position: relative：JSFiddle

Answer 2

http://jsfiddle.net/VLk6m/19/

如果您正确拼写 relative，这当然是可能的。

你有position: relativ; 它应该是position: relative; 然后只是 0 出你的left和top属性。

.myDiv
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    padding: 0px;
    width: 100px;
    height: 100px;
    background-color: grey;
}

.myDiv1
{
    background-color: green;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
}

.myDiv2
{
    background-color: red;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
}

.myDiv3
{
    background-color: black;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 0px;
    display: inline-block;
}