为什么在这种情况下绝对定位不起作用_它的顶部和左侧值答案

【问题标题】：Why absolute positioning does not work in this case _ its top and Left values为什么在这种情况下绝对定位不起作用_它的顶部和左侧值
【发布时间】：2012-10-05 01:20:36
【问题描述】：

我已经用 css 做了一些绝对定位。但是在下面的例子中，为什么在 firstBox 中，top 和 left 的值被忽略了呢？（我希望顶部为 100 像素，左侧为 100 像素）。第二个盒子正确定位。

<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
  color: white;
  width: 500px;
  padding: 1em;
  background: red;
  position::absolute;
  top:100px;
  left:100px;
 z-index:2;
}
#secondBox {
    color: white;
    width: 500px;
    padding: 1em;
    background: blue;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>

【问题讨论】：

标签： absolute

【解决方案1】：

这是因为您将 2 个冒号 用于position: absolute; 用于#firstBox

My Fiddle

【讨论】：

; 是分号； : 是一个冒号。他有两个冒号，不是分号。两个分号可能不会搞砸，因为第一个分号会关闭 position 属性并且它是有效的。它后面是一个无效的空属性，但大多数浏览器应该忽略它并正确使用它周围的有效属性。