CSS中的相对和绝对定位？

Question

以下是目前的代码：http://jsfiddle.net/WJve3/3/

如何使Object1和Object2相对于“标题”定位？

我现在似乎遇到的问题是Object1相对于title定位而Object2相对于Object1定位

Answer 1

你拼错了“位置”;并且您需要对Object1和Object 2使用静态定位。试试这个：

.title {
    position: absolute;
    top: 0%;
    left: 45%
}
.Object1 {
    position: absolute;
    top 0;
    left: 0;
}
.Object2 {
    position: absolute;
    top 0%;
    left: 0;
}

Answer 2

你错过了一个</div>

<DIV class="title">
    <h1><font face="Comic Sans MS" color=black><center>Title</center></font></h1>
    <DIV style="position: relative;"> 
        <DIV class="Object1">
            <h2><font face="Comic Sans MS" color=black><center>Object1</center></font></h2>
        </DIV>
        <DIV class="Object2">
            <h2><font face="Comic Sans MS" color=black><center>Object2</center></font></h2>
        </DIV> <!-- MISSING /DIV -->
    </DIV>
</DIV>

拼错了“位置”

Answer 3

您可以使用此CSS将对象放在一行

.title {
   margin: 0 auto;
   width: 300px;
}
.Object1 {
   float: left;
   width: 50%;
}
.Object2 {
   width: 50%;
   float: right;
}

Answer 4

如果您需要彼此相邻的物品，则不需要仓位：

    .title {
      position: absolute;
      top: 0%;
      left: 45%
    }
   .Object1 {
      float:left
    }
    .Object2 {
      float:left;
      margin-left:20px;
    }

或者你可以给标题div一个相对位置，给object1和2绝对定位。通过这种方式，您可以将对象放在标题div中。