Question

我正在学习CSS并且正在摆弄CSS位置属性。据我所知，position:absolute将相对于浏览器窗口放置元素，并且下面的所有元素将在具有position：absolute的元素之前被推送。但是当我运行小提琴时，我发现默认情况下，元素位于h1标记下方而不是窗口的左上角。请让我知道我在理解方面出错了。以下是代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Just some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css</h1>
    <div style="position:relative; background-color:green; width:20px;padding:10px;">
      <div style="position:absolute;background-color:red;padding:10px">
        <span>value</span>
      </div>
    </div>    
  </body>
</html>

Plnkr链接 - Plunker Link

Answer 1

position:absolute将元素相对于其最近定位的祖先元素（在本例中为其position:relative父div）定位。使用position:fixed以相对于窗口定位。

Answer 2

你需要为div做一些定位。

left:100px;
top:200px;

或者您也可以使用关系定位。

Answer 3

您必须从父div中删除position: relative。绝对位置将基于它，因为它是最近的相对定位元素。如果删除它，它将相对于html主体定位。您还必须定位div，否则它将默认为其流动位置。

top: 0px;
left: 0px;

代码：

<div style="position: relative; background-color:green; width:20px; padding:10px;">
  <div style="position:absolute; top:0px; left: 0px; background-color:red; padding:10px">
    <span>value</span>
  </div>
</div>

摘录：

#outer {
  background-color: green;
  width: 20px;
  padding: 10px;
}
#inner {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: red;
  padding: 10px
}

 <h1>Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css positioning in the browser. Just some text to check the css</h1>
<div id="outer">
  <div id="inner">
    <span>value</span>
  </div>
</div>

Answer 4

与具有相对位置的第一个父级相比，位置是绝对的！

在您的示例中，红色div与绿色div相比具有绝对位置。

如果您想在窗口顶部放置一个元素，可以使用position：fixed。

如果你想在身体的顶部放置一个元素，你必须删除绿色div的相对位置！

干杯！

css定位绝对不按预期工作

4 个答案: