CSS - 如何制作位置：绝对工作不在所有100％屏幕区域

Question

我的body宽度为800px：

body {
width:800px;
margin:15px auto;}

我有一个<div>区域（100x200px）应该位于正文的右上角，无论屏幕或浏览器打开它。我试着做以下事情：

#login-hover-cont{width:210px;padding:20px;position:absolute;right:0px;_right:-1px;top:30px;z-index:3;background:#fff}

它将div置于SCREEN的右上角，这是错误的 - 我希望它位于BODY右边界的位置。我怎么做？ 不要使用“位置：亲戚”。

Answer 1

将您的body更改为此。

body 
{
    width: 800px;
    margin: 15px auto;
    position: relative;
}

你的div将在体内并且具有与此类似的风格。

#login-hover-cont
{
    ...
    position: absolute;
    top: 30px;
    right: 0px;
}

你需要这样做，因为绝对定位总是相对于最接近祖先的元素。

Answer 2

我不会将主体宽800px，将其保留为自动宽度，并在绝对定位的位置放置一个容器div。给容器宽度为800px，并给出一个postion：相对样式定义。那么绝对位置就是相对于你的容器div。

这是一个工作样本

http://jsfiddle.net/5a6Fu/