html - 定位的绝对 div 未出现在定义的位置

Question

我有以下代码片段:

.right_full_navigation{
    position: relative;
    height: 500px;
    width:250px;	
}
.favourites{
    position:absolute;
    top:70px;
    right:0px;
    border-radius:7px;
    border: 1px solid #E1E3E4;
    margin-right:10px;
    background-color:#ffffff;
    width:250px;
    height:500px;
    padding-top:19px;
    margin-left:6%;
}

<div class="right_full_navigation">
    <div class="favourites"></div>
</div>

使用此代码，我希望 div 位于页面的右侧，但是，div 出现在左侧附近， float 在页面的中间和左侧之间。我的其他 .php 页面上有完全相同的代码，但 div 似乎仅在该页面上出现困惑。是代码有问题，还是受到其他div的影响？

Answer 1

当您将父元素定位为relative并将子元素定位为absolute时，子元素的位置在父元素中定义。因此，在您的实例中，您的父级的宽度为 500px。如果您使用 right:0; 定位子项，则它的右侧将紧靠父项的 500px 宽度。

如果您希望子元素相对于主体而不是父元素定位，则必须将其从父元素中取出，或者应将父元素的位置设置为static。