Question

所以这就是问题，

基本上，当您调整窗口大小时，相对div的大小意味着缩小，高度意味着缩小，并改变div的右下角位置。然而，对于我的生活，我无法在调整窗口大小时做出“绝对”改变位置的底部。

任何帮助表示赞赏！ HALP！

<style type="text/css">

    .relative{
        position:relative;
        top:100px;
        left:100px;
        min-width:250px;
        max-width:500px;

        height:500px;
        background-color:blue;
    }


    .absolute{
        position:absolute;
        width:100px;
        height:100px;
        background-color:red;
        bottom:10%;
        right:10%;
        vertical-align: baseline;

    }
    </style>
</head>
<body>
    <div class="relative">
        relative
        <div class="absolute">absolute</div>
    </div>
</body>

Answer 1

父元素的大小为height:500px;。这意味着在调整大小时更改宽度，但高度不会。您应该输入例如：

min-height:250px;
max-height:500px;

这是小提琴显示结果： http://jsfiddle.net/324e2/

Answer 2

根据我的理解，在调整窗口大小时，蓝色div（相对）的大小会根据缩小或展开窗口而改变。当蓝色div大小发生变化时，您希望将红色div（绝对值）保持在右下角位置。这是对的吗？

如果是这样，你需要将蓝色div宽度设为100％，并且在你点击html元素之前，它的父母宽度一直是100％。

body,
html {
    height: 100%;
}

.relative{
    position:relative;
    top:100px;
    left:100px;
    min-width:250px;
    max-width:500px;

    max-height: 500px;
    height: 100%;
    background-color:blue;
}


.absolute{
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    bottom:10%;
    right:10%;
}

JSFiddle

注意：在小提琴上，向上和向下移动结果部分栏（分割css和结果的栏）以查看效果。

调整窗口大小时，底部div的绝对位置不会改变

2 个答案: