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显示在左侧附近，浮动在页面的中间和左侧之间。我在其他.php页面上有完全相同的代码，但div似乎只在这个页面上乱了。代码是否有问题，或者是否受到其他div的影响？

Answer 1

当您将父元素定位为<template> <top-bar></top-bar> <div class="message">{{ message }}</div> </template> <script> import TopBar from './top-bar.vue' export default { data () { return { message: 'Hello World' } }, components: { TopBar } } </script>并将子元素定位为relative时，子元素的位置将在父元素中定义。因此，在您的实例中，您的父级的宽度为500px。如果您使用absolute定位孩子，则其右侧将与父母的500px宽度对接。

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

Answer 2

这是因为您将父DIV（right_full_navigation）的宽度设置为仅250px，并且还为子div（收藏夹）使用了相同的宽度。

只需增加父div宽度或设置父宽度（100％）即可。希望它能够发挥作用。

＆＃13;

.right_full_navigation{
    position: relative;
    height: 500px;
    width:100%;	
}
.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%;
}

＆＃13;

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

＆＃13;

定位的绝对div不会出现在定义的位置

2 个答案: