我有一些我无法得到的问题。
一个。如果我这样做：
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
我的浏览器中会出现Scrollsbars。怎么避免呢？我希望我的顶栏是全宽的，带有填充内容，但我不希望它超过实际宽度并使滚动条出现。怎么做？
湾你有没有关于如何根据用户的分辨率扩展网站元素的文章？当我尝试
position: absolute;
top: (some percentage)%
left: (some percentage)%
这绝不准确。使用像素而不是百分比 - 对于不同的分辨率，它不准确。
℃。菜单覆盖
有没有办法对div进行级别调整，以便我的下拉式css-only菜单不会出现在div下？当发生这种情况时，我无法点击该菜单中的某些项目，因为它们隐藏在正文div后面。
提前致谢！
答案 0 :(得分：2)
一个。将box-sizing: border-box; -moz-box-sizing: border-box添加到您的代码中。它会使填充在100％宽度范围内，请查看here以获取更多信息，此处查看demo
湾尝试在网上搜索响应式设计。很多关于如何根据不同设备显示您的网站的信息。你可能不想扩展所有内容。
℃。你在寻找z-index吗？根据您提供的信息，不能帮助您。如果您需要了解更多信息，请添加HTML / CSS代码。
答案 1 :(得分：1)
所有问题都通过简单的CSS解决，所以这是个好消息！
<强>填充
这是因为CSS处理填充的方式。例如，如果您将元素设置为：
#id{
width:100px;
height:100px;
padding:10px;
}
实际上最终会是120px x 120px。这在http://www.w3.org/TR/CSS2/box.html解释。
您可以使用此处详述的框大小调整方法http://www.paulirish.com/2012/box-sizing-border-box-ftw/
来解决此问题根据分辨率进行缩放
这称为响应式设计。这里真的太多了，但基本的是你使用媒体查询来做到这一点。这里详细介绍http://css-tricks.com/css-media-queries/
菜单叠加
您可以使用CSS为您提供的z-index属性来解决此问题。这基本上是这样的：z-index：1低于z-index：2。需要注意的是，只有在元素上声明了一个位置时，z-index才会起作用。
http://css-tricks.com/almanac/properties/z/z-index/
同样，这里不需要js，这是个好消息，因为CSS对你来说要快得多，而且可扩展性更强。
答案 2 :(得分：0)
当然会出现滚动条，因为你有一个100％+ 10px的
你能做的是：
position: absolute;
top: 0px;
width: 100%;
padding: 0;
或
position: absolute;
top: 0px;
width: 90%;
padding: 10px; // if screen allows it
根据分辨率来缩放页面我强烈建议你使用bootstrap来实现页面多设备非常简单且非常快http://getbootstrap.com/
答案 3 :(得分：0)