html - CSS位置：相对；孩子们不会互相忽视

Question

我一直用浮动。认识到也许它不是最好的方法。尝试使用相对位置。为什么 myDiv 的孩子不互相忽略 top ？因为它不是 inline-block ？

<div class="myDiv">
    <div class="myDiv1"></div>
    <div class="myDiv2"></div>
    <div class="myDiv3"></div>
    <div class="myDiv4"></div>
</div>

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

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

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

.myDiv3
{
    background-color: blue;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 50px;
}

.myDiv4
{
    background-color: yellow;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 70px;
}

http://jsfiddle.net/VLk6m/2/

Answer 1

这是预期的行为。 请参阅 MDN 文档

布置所有元素，就好像该元素没有定位一样，然后调整元素的位置，而不改变布局（因此在没有定位的情况下为元素留下一个间隙）。

Answer 2

我不确定您在这里要做什么，但是如果您希望它们都在同一行上，则需要使用 float 或display将inline-block. 否则，当它是 时display: block，它会占用整个“行”并且它不知道您希望它们位于同一行。