Essential front-end development

CSS Position

Fixed

Fixed positioning is almost identical to absolute positioning except that it does not look for the nearest positioned ancestors, but rather immediately positions relative to the visible part of the viewport. This is useful for elements that must have the same position regardless of scroll position.

Code and Preview

Description

Notice here how the fixed positioned element (star inside the green box) is positioned relative to the visible part of the viewport and is always in the top left corner no matter how much we resize the window or scroll to diffent positions.

Try scrolling up and down in the preview frame.

<main>
  <p class="red box" id="one">You cannot buy the revolution. You cannot make the revolution. You can only be the revolution. It is in your spirit, or it is nowhere.</p>

  <p class="green box" id="two">There's a point, around the age of twenty, when you have to choose whether to be like everybody else the rest of your life, or to make a virtue of your peculiarities.
    <span class="star">
      <svg viewBox="0 0 280.124 280.124">
        <path fill="#f4b459" d="M280.124 106.914l-92.059-6.598-48.008-95.875-48.55 95.874L0 106.914l61.282 74.015-17.519 94.754 96.294-43.614 96.294 43.606-17.799-94.754 61.572-74.007z"/>
        <path fill="#e3a753" d="M236.352 275.683l-17.799-94.763 61.518-73.945v-.07l-92.006-6.59-48.008-95.874v227.627z"/>
      </svg>
    </span>
  </p>

  <p class="blue box" id="three">If you evade suffering you also evade the chance of joy. Pleasure you may get, or pleasures, but you will not be fulfilled. You will not know what it is to come home.</p>
  
  <p class="red box" id="four">A child free from the guilt of ownership and the burden of economic competition will grow up with the will to do what needs doing and the capacity for joy in doing it. It is useless work that darkens the heart. The delight of the nursing mother, of the scholar, of the successful hunter, of the good cook, of the skilful maker, of anyone doing needed work and doing it well, - this durable joy is perhaps the deepest source of human affection and of sociality as a whole.</p>

  <p class="green box" id="five">To make a thief, make an owner; to create crime, create laws.</p>

  <p class="blue box" id="six">He tried to read an elementary economics text; it bored him past endurance, it was like listening to somebody interminably recounting a long and stupid dream. He could not force himself to understand how banks functioned and so forth, because all the operations of capitalism were as meaningless to him as the rites of a primitive religion, as barbaric, as elaborate, and as unnecessary. In a human sacrifice to deity there might be at least a mistaken and terrible beauty; in the rites of the moneychangers, where greed, laziness, and envy were assumed to move all men's acts, even the terrible became banal.</p>
</main>

<main>
  <p class="red box" id="one">You cannot buy the revolution. You cannot make the revolution. You can only be the revolution. It is in your spirit, or it is nowhere.</p>

  <p class="green box" id="two">There's a point, around the age of twenty, when you have to choose whether to be like everybody else the rest of your life, or to make a virtue of your peculiarities.
    <span class="star">
      <svg viewBox="0 0 280.124 280.124">
        <path fill="#f4b459" d="M280.124 106.914l-92.059-6.598-48.008-95.875-48.55 95.874L0 106.914l61.282 74.015-17.519 94.754 96.294-43.614 96.294 43.606-17.799-94.754 61.572-74.007z"/>
        <path fill="#e3a753" d="M236.352 275.683l-17.799-94.763 61.518-73.945v-.07l-92.006-6.59-48.008-95.874v227.627z"/>
      </svg>
    </span>
  </p>

  <p class="blue box" id="three">If you evade suffering you also evade the chance of joy. Pleasure you may get, or pleasures, but you will not be fulfilled. You will not know what it is to come home.</p>
  
  <p class="red box" id="four">A child free from the guilt of ownership and the burden of economic competition will grow up with the will to do what needs doing and the capacity for joy in doing it. It is useless work that darkens the heart. The delight of the nursing mother, of the scholar, of the successful hunter, of the good cook, of the skilful maker, of anyone doing needed work and doing it well, - this durable joy is perhaps the deepest source of human affection and of sociality as a whole.</p>

  <p class="green box" id="five">To make a thief, make an owner; to create crime, create laws.</p>

  <p class="blue box" id="six">He tried to read an elementary economics text; it bored him past endurance, it was like listening to somebody interminably recounting a long and stupid dream. He could not force himself to understand how banks functioned and so forth, because all the operations of capitalism were as meaningless to him as the rites of a primitive religion, as barbaric, as elaborate, and as unnecessary. In a human sacrifice to deity there might be at least a mistaken and terrible beauty; in the rites of the moneychangers, where greed, laziness, and envy were assumed to move all men's acts, even the terrible became banal.</p>
</main>

/* second rectangle (first green one) */
#two {
  position: relative;
}

/* element inside green box */
.star {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  border: 2px solid black;
  background-color: white;
  width: 24px;
  height: 24px;
}

main {
  height: 1440px;
}

.box {
  padding: 2em;
  margin: 2em 0;
  color: white;
}

.box:first-child, .box:last-child {
  margin: 0;
}

.red {
  background-color: #b71c1c;
}

.green {
  background-color: #2e7d32;
}

.blue {
  background-color: #1565c0;
}

/* second rectangle (first green one) */
#two {
  position: relative;
}

/* element inside green box */
.star {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  border: 2px solid black;
  background-color: white;
  width: 24px;
  height: 24px;
}

main {
  height: 1440px;
}

.box {
  padding: 2em;
  margin: 2em 0;
  color: white;
}

.box:first-child, .box:last-child {
  margin: 0;
}

.red {
  background-color: #b71c1c;
}

.green {
  background-color: #2e7d32;
}

.blue {
  background-color: #1565c0;
}

Editor

Preview

Reset code

PrevNext Lesson