css positioning absolute not working as expected

问题

I am learning CSS and was fiddling with CSS position property. As I understand, the position:absolute will place the element with respect to the browser window and all the elements below will be pushed before the element with position:absolute. But when I run the fiddle, I see that by default the element is placed below the h1 tag and not at the top left corner of the window. Please let me know where I am going wrong in understanding. Below is the code:

<!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 link - Plunker Link

回答1:

position:absolute positions the element relative to its nearest positioned ancestor element (in this case, its position:relative parent div). Use position:fixed in order to position relative to the window.

回答2:

You need some positioning for the div.

left:100px;
top:200px;

Or you can use relational positioning as well.

回答3:

Position is absolute compared to the first parent with relative position!

In your example, red div has an absolute position compared to the green div.

If you want to have an element at the top of the window you can use position:fixed.

If you want to have an element at the top of the body, you have to remove the relative position of the green div!

Cheers!

回答4:

You have to remove position: relative from the parent div. The absolute position will be based off of it, as it is the nearest relatively positioned element. If you remove it, it will be positioned relative to the html body. You also have to position the div, or it will default to its flowed position.

top: 0px;
left: 0px;

Code:

<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>

Snippet:

#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>

来源：https://stackoverflow.com/questions/35346041/css-positioning-absolute-not-working-as-expected

标签

css

css3

css-position