CSS百分比的屏幕位置：绝对 [英] CSS percentage of screen with position:absolute

问题描述

我有一个浮动菜单类型的东西在配置文件显示一些信息的左侧，它看起来不错，但我使用不同的pc之前，它是重叠的主页体（由于屏幕分辨率）。

I have a little "floating" menu type thing to the left of a profile displaying some info and it looks good, however i used a different pc before and it was overlapping the main page body (due to screen resolution).

所以这是原来的CSS（删除了CSS3的奇怪东西）：

So this is the original CSS(with CSS3 fancy stuff stripped out):

position: absolute;
border: 1px solid #73a7f0;
width: 200px;
left:10px;
top: 160px;
padding: 5px 14px;
border-radius: 4px;

这是我想要做的，更改的行是：

and this is what i am trying to do, the line that has changed is:

width: 10%;

任何想法如何看起来一样，取决于屏幕？

Any ideas how it can look the same depending on screens?

谢谢！

推荐答案

Diodeus的答案是真的，如果容器有静态定位。如果容器设置了宽度，即使是百分比宽度，并且容器的位置不是 static （默认值），那么孩子将使用它作为其

Diodeus' answer is true if the container has static positioning. If the container has a width set, even a percentage width, and the container has a position other than static (the default), the child will use that as the context for its percentage width.

这里提供： http://jsfiddle.net / USJnN /

这篇关于CSS百分比的屏幕位置：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！