html - 子 Div 相对于父 Div 的位置

Question

我希望有一个几乎可以在一定程度上做出响应的网站。

我已经快速模拟了我希望它的外观（这确实是基本的并且缺少页面内容，但是您应该了解总体思路；

大：http: //i.stack.imgur.com/vX11k.png

我敢肯定你以前见过这样的网站，但我无法让编码工作。我只需要将内部 div 定位到父 div 而不是页面本身。

到目前为止，我似乎无法让它发挥作用。

主分区：

#site {
width: 1000px;
margin: 0 auto;
position: relative;
}

电子邮件按钮

.email {  
background-image: url(img/topmenu_email.png);
position: absolute;
right: 10px;
top: 0px;
z-index: 83;
}

这是它的外观（锁定到一边，当我调整浏览器大小时，一切都会重叠）； http://i.stack.imgur.com/R1cAY.png

Answer 1

从我所见，您的CSS没有任何问题。

它确实表现出应有的样子。

如果您的问题是电子邮件等没有一直到屏幕的右侧，可能是因为这个

#site {
width: 1000px; //It's saying that the site only have 1000px of width, and not the screen size
margin: 0 auto;
position: relative;
}

.email {  
background-image: url(img/topmenu_email.png);
position: absolute;
right: 10px;
top: 0px;
z-index: 83;
}

请记住，绝对元素将达到其相对父级的大小，在本例中为宽度。

可能的解决方案是设置

#site {
width: 100%; //Make it full width
margin: 0 auto;
position: relative;
}