html - 防止 div 继续缩小浏览器屏幕

Question

当我调整浏览器窗口的大小时，我的 div 元素会向左移动，但我希望它们在我这样做时留在一个地方。如何在调整浏览器窗口大小时使 div 元素保持在一个位置？

<div style="background:red; width:30px; height:30px">

</div>

Answer 1

<div style="background:red; width:30px; height:30px position: absolute;
            top:/* pixels from top of screen*/ 30px;
            left:/* pixels from left side of screen*/100px;">

</div>

Answer 2

您有几个选项来实现您想要的，但是您将使用哪一个取决于您的其余代码。

您可以绝对定位容器，但在这种情况下，包含这些 div 的父元素也具有在其上定义的非静态定位非常重要。实现这一目标的最流行方法之一是定义与父元素的相对定位，然后绝对定位内部元素。

这是一个例子。

HTML

<div class="wrapper">
    <div class="div_1">
        <!-- DIV 1 content -->
    </div>
    <div class="div_2">
        <!-- DIV 2 content -->
    </div>
</div>

CSS

.wrapper {
    position:relative;
}

.div_1 {
    position:absolute;
    top:10px;
    left:20px;
}
.div_2 {
    position:absolute;
    bottom:10px;
    left:20px;
}

Answer 3

使用垂直对齐，填充，位置属性。对于位置属性，请参阅以下链接 ，在此处输入链接描述 对于填充属性，请参阅以下链接，在此处输入链接描述 对于垂直对齐属性，请参阅以下链接，在此处输入链接描述

<div style="background:red; width:30px; height:30px;vertical-align:top;padding:0px 0px 0px 0px">
</div>