Essential front-end development

CSS Position

Absolute

An absolutely positioned element will position itself relative to the nearest positioned ancestor. We can then modify its final position by setting the top, bottom, left and right properties. If no ancestor elements are explicitly positioned, the element will be displayed outside of the <html> element and be positioned relative to the viewport.

Viewport

Code and Preview

Description

Notice how the absolutely positioned element (green box) is positioned relative to the viewport of the frame because it doesn't have any explicitly positioned ancestors. Its final position ends up covering most of the first red box.

<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.</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.</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: absolute;
  left: 100px;
  top: 0;
  margin: 0;
}

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: absolute;
  left: 100px;
  top: 0;
  margin: 0;
}

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

Positioned ancestor

Code and Preview

Description

Notice here how the absolutely positioned element (star inside the green box) is positioned relative to the nearest explicitly positioned ancestor (green box). Try setting the position of .star back to static and see what changes.

<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: absolute;
  top: 0.5em;
  left: 2em;
  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: absolute;
  top: 0.5em;
  left: 2em;
  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