CSS定位不起作用

Question

有时候我发现CSS定位属性不能正常工作。以下是我的代码，

.position
{
position:absolute;
left:50%;
}

上面的代码应该将类的元素定位在屏幕的50％，但它不会发生。要把它放在所需的位置，我必须写'left：220％'这可能是原因。

提前致谢。

Answer 1

position: relative和position: absolute的元素不是相对于屏幕（或者更确切地说是当前文档），而是相对于下一个父元素 position: relative或position: absolute设置。

Here is a JSFiddle说明了这个问题。

你无法用纯CSS“打破”那个监狱。要相对于文档定位元素，您应该将其作为文档的直接子项。