Home/ Questions/Q 8291893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:17:03+00:00

Possible Duplicate: position: absolute without setting top/left/bottom/right? Looking at the following code, I have

  • 0

Possible Duplicate:
position: absolute without setting top/left/bottom/right?

Looking at the following code, I have div#box2 that has position: absolute set on it. It is in between two divs that have position: static set on them. Based on the following code, I would expect div#box2 to be at the top left of the body element. However, when it is rendered it receives a top value placing it beneath box1. Why does this happen?

I understand that when I explicitly set the top value of div#box2 to 0px, it appears at the top. I just don’t know why it is not computed to 0px by the browser to begin with.

Here is some sample code:

<!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box2"><span>2</span></div>
      <div id="box3"><span>3</span></div>
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When an element is given position absolute it is taken out of the flow allowing other elements to be placed above or below it. Without explicitly setting a top value, the top value will retain the elements position had it not be removed from the flow.

    If we switch the order of the boxes you can see this taking place as #box2 is completely removed from the flow and sits outside of #content but still stacks where it would be if it had position:static

    <!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box3"><span>3</span></div>
      <div id="box2"><span>2</span></div>

    </div>
  </body>
</html>
    • 0