如何为所有屏幕分辨率定位div

Question

我需要在网页的某个部分放置一个div。所以我编码如下，

<div style='position:absolute;top:500px;margin-left:300px;width:100px;border:1px solid #000000;height:100px;'></div>  

当我在19英寸显示器中检查此页面时，它被放置在我想要的位置。但是我在17英寸的显示器上检查了同一页面，它在左侧放置了50-70像素。

那么我应该如何将div放在同一个地方以进行所有屏幕分辨率。这个问题可能看起来很简单，但我对css并不那么熟悉所以任何帮助都非常感激。感谢。

Answer 1

最初div没有父元素，因此它直接位于body元素下。所以当我试图设置左：100px时，它从浏览器的最左边部分开始计算。

但是我已经拥有900px的div和一些内容，并且这个div中的一半空间（垂直）是空的。这是我想放置100px div的地方。

所以我将900px位置设置为相对位置并将100px设置为900px div。现在这个div被定位为父元素的“绝对”。

现在，如果我向左设置：100px到div，从其相对位置的父元素开始计算。

概念很简单，

使用下一个可用的父容器（绝对或相对）进行绝对定位

请查看有助于实现此目的的此链接，absolute postioning

Answer 2

您可能想要absolute position div horizontally center然后写这样的 CSS：

div{
  position:absolute;
  top:500px;
  margin-left:-50px;
  left:50%;
  width:100px;
  border:1px solid #000000;
  height:100px;
}

＆安培;您可以使用media query进行不同的分辨率检查此http://css-tricks.com/6206-resolution-specific-stylesheets/