0

It's said that a fixed div is simply taken out of the whole page and has fixed relation to the client window. I thought it was easy until I read the top answer of this post. In that case, I can't see strong relationship between the fixed div and the window border.

Can anybody explains the inner dark magic of setting relative position on fixed divs?

Community
  • 1
  • 1
Determinant
  • 3,886
  • 7
  • 31
  • 47

1 Answers1

2

There is two separate questions here:

  1. How position: fixed; works.
  2. In what place absolute and fixed positioned items are placed then you didn't write top/left/bottom/right coordinates.

That you write in your post about position: fixed; is basically correct — fixed object is taken out of the page and sticked to window border. And if you provide it with starting position by using left/right/top/bottom it will count them from window object.

But what will happened if you add position: fixed; but didn't add the coordinates or only add coordinates in one dimension?

If you do so then object's starting position will be calculated from the place it was before it was removed from page's flow.

Let's try some simple examples with position: absolute; (it works pretty much the same as fixed in this regard).

jsFiddle of our examples are here

Example with position: static;:

`<div>First sentence. <mark>Second sentence.</mark> third sentence. </div>`

In this example second sentence is inside the page flow, so it is positioned after first sentence and before third.

Example with position: absolute;:

<div>First sentence. <mark style="position: absolute;">Second sentence.</mark> third sentence.</div>

In this example second sentence is taken from the page flow, but didn't given the coordinates. So it positioned after first sentence (the place it was before we removed if from flow), but the third sentence is now under second because if isn't it the flow anymore.

Example with position: absolute; and; left: 0;`:

<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div>

And finally we give second sentence some starting point with left: 0; so now it is not only didn't occupy any space, but also moved to the left party of the container. (but it is still on the same height as before because we didn't add any top or right coordinates).

position: fixed; working pretty much the same. So in the original post author just fixed top coordinate and didn't fix left of right. Because of this object was horizontally positioned in the place of it's original location in the page's flow.

Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27