定位和调整浏览器窗口大小答案

【问题标题】：positioning and resizing the browser window定位和调整浏览器窗口大小
【发布时间】：2015-12-14 09:36:08
【问题描述】：

响应式定位对我来说是最令人困惑的事情。我将举一个简单的例子来帮助描绘我无法弄清楚的东西。我有一个div。我将宽度和高度设置为百分比并将其放置在绝对页面上，顶部 25% 和左侧 5%。所有这些看起来都很好，但是当我调整页面大小时，它会移动到嗅觉屏幕分辨率的 25% 和 5%，我不能让它呆在那里。我有一个最小宽度和高度，以便实际的 div 不会调整大小，只是它位于页面上的位置。我如何在网页上放置某些内容以使其具有响应性，但在调整浏览器窗口大小时不会到处移动。抱歉，如果我不是很擅长解释这一点，我只是从来没有真正理解如何正确定位。

例子：

#example_div {
   width: 10%;
   height: 10%;
   min-width: 100px;
   min-height: 100px;
   position: absolute; 
   top: 25%;
   left: 5%;

}

【问题讨论】：

标签： css position css-position stylesheet pixel

【解决方案1】：

百分比值始终相对与父元素（即当前元素周围的 on，也可以是主体或窗口）。

像素值是绝对的。您可以组合像素值和百分比值。如果您希望 DIV 在调整窗口大小时缩小，但保持在同一位置，请使用百分比值作为宽度和高度，并使用像素值作为顶部或底部以及左侧或右侧。

【讨论】：