CSS 如何为所有屏幕分辨率定位 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7763198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to position a div for all screen resolutions
提问by vkGunasekaran
I need to place a div in certain part of my web page. so i coded as following,
我需要在我的网页的某些部分放置一个 div。所以我编码如下，
<div style='position:absolute;top:500px;margin-left:300px;width:100px;border:1px solid #000000;height:100px;'></div>
When i checked this page in a 19 inch monitor it is placed where i wanted. but i checked the same page in a 17 inch monitor it is placed 50-70 px more on the left side.
当我在 19 英寸显示器中查看此页面时，它已放置在我想要的位置。但我在 17 英寸显示器中检查了同一页面，它在左侧放置了 50-70 像素。
so how should i placed the div in the same place for all screen resolution. This question may seems simple, but i'm not that much familiar to css so any help greatly appreciated. Thanks.
那么我应该如何将 div 放置在所有屏幕分辨率的同一位置。这个问题可能看起来很简单，但我对 css 不太熟悉，因此非常感谢任何帮助。谢谢。
回答by vkGunasekaran
Initially the div had no parent elements, so it is directly under body element. so when i tried to set left:100px, it is counted from leftmost part in the browser.
最初 div 没有父元素，所以它直接位于 body 元素之下。所以当我尝试设置 left:100px 时，它是从浏览器最左边的部分开始计算的。
But i already a had div with 900px with some content and half of the space(vertically) in this div was empty. this is where i wanted to place 100px div.
但是我已经有一个 900px 的 div，里面有一些内容，这个 div 中的一半空间（垂直）是空的。这是我想放置 100px div 的地方。
So i set the 900px position to relative and taken the 100px into 900px div. now this div is positioned "absolute" to the parent element.
所以我将 900px 位置设置为相对位置并将 100px 变成 900px div。现在这个 div 被定位为“绝对”到父元素。
Now if i set left:100px to the div its counted from its parent element which is positioned relatively.
现在，如果我将 left:100px 设置为从其相对定位的父元素开始计数的 div。
The Concept is simple,
概念很简单，
Absolute positioning works by using the next available parent container that is positioned (absolutely or relatively)
绝对定位通过使用定位（绝对或相对）的下一个可用父容器来工作
Have a look at this link it helped to achieve this, absolute postioning
看看这个链接它有助于实现这一点，绝对定位
回答by sandeep
May be you want an absolute positiondivhorizontallycenterthen write like this
CSS:
可能你想要一个absolute positiondivhorizontallycenter像这样写的 CSS：
div{
position:absolute;
top:500px;
margin-left:-50px;
left:50%;
width:100px;
border:1px solid #000000;
height:100px;
}
& you can use media queryfor different resolution check this http://css-tricks.com/6206-resolution-specific-stylesheets/
＆您可以使用media query不同的分辨率检查这个http://css-tricks.com/6206-resolution-specific-stylesheets/
