How can I anchor text in HTML

position: fixed

Fixed element

Elements with CSS position: fixed and position: absolute behave almost the same way. Only when the user scrolls the browser window does the difference become apparent:

  • An absolutely positioned block lies relative to its container or to the HTML document and moves with it when the user scrolls.
  • A fixed block sits firmly in the viewport of the browser window and does not move from its place.

position: fixed is a good candidate for the navigation bar, and sometimes the footer of a website. Because a fixed element always remains in the viewport, the visitor always has access to the links in the navigation or footer.

position: fixed

In the example there are 3 blocks in the source text one after the other, the fixed block (red, at position 2 in the example) does not show itself in the flow of the content, but - like an absolutely positioned element - has been removed from its original position. The surrounding elements behave as if the fixed block did not exist and the following elements move up.

static: no positioning

position: fixed

static: no positioning

Without specifying the position Top, left, right, bottom the block is not visible in the viewport.

.static {width: 300px; height: 40px; background: gray; } .fixed {position: fixed; width: 300px; height: 100px; background: red; }
static: no positioning

position: fixed

static: no positioning
static: no positioning

The element lays itself along with it like an absolutely positioned block position: fixed about the content and leaves no gap when it is removed again.

position: sticky

position relative and absolute belong to the old guard of positioning with CSS and position: fixed is also an established property. With CSS3 position sticky was added.

While an element with fixed has a fixed position from the start, blocks with CSS scroll position sticky with the content until they reach a certain position and only then are fixed.

We often see the effect of sticky on the top menu bars of websites.