关于CSS3中的定位值

Question

我想与您核实一下信息：

基于这张图片：

是相对正方形吗？我认为它必须与绝对正方形的左边对齐50px而不是从窗口左边50px。

我说错了吗？

Answer 1

这是一个猜测，因为它取决于html的格式。我已经创建了一个JSFiddle供您学习和学习。所有div目前都是嵌套的，假设你是正确的。

Click here for a JSFiddle with example code

是的，它是语义html，但这使它更容易理解。

 <div class="fixed">
   <div class="absolute">
     <div class="relative">
     </div>
   </div>
 </div>

用于样式的css类。

.fixed {
    position: fixed;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 0px;
    background: #000000;
}

.absolute {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
    background: #333333;
}

.relative {
    position: relative;
    width: 50px;
    height: 50px;
    top: 50px;     
}

注意： 如果你看一下经常使用的东西，如果你在相对定位中使用绝对定位，就像绿色方块内的紫色方块一样，它会变得更有趣。

• absolute：元素相对于其第一个定位 （不是静态的）祖先元素。
• relative：元素相对于其正常位置定位， 所以“left：20”为元素的LEFT位置增加了20个像素

这允许您将div中的元素定位在div中。有关定位的更多信息here.