Behavior of the position properties like: top, right, bottom, left when specified together

by Konstantin Rouda

HTML

<div class="container"></div>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid red;
}

.container::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: -1rem;
  top: 1rem;
  bottom: -1rem;
  background: cornflowerblue;
}

JavaScript

/*





https://developer.mozilla.org/en-US/docs/Web/CSS/right






The effect of right depends on how the element is positioned (i.e., the value of the position property):

When position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block.
When position is set to relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.
When position is set to sticky, the right property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
When position is set to static, the right property has no effect.
When both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both -- for example, if a width is declared -- the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.










*/