2024-03-25 Position

by Ttt Yyy

HTML

<div>
  <div class="static border">Static positioning: element would flow in page as it normally would</div>
  <div class="relative border">Relative positioning: element positioned relative to its normal position. in this example with left 20PX</div>
   <div class="sticky border">Sticky positioning:  toggles between relative and fixed depending on scroll position. POsitiong relative until given offset position is met in the view port then it "sticks" (position:fixed) in place</div>
  <div class="relative-container border">
    <div class="absolute-top-left border">Top left absolute positioning</div>
    <div class="absolute-centered border">Centered absolute positioning</div>
  </div>
  <div class="fixed border">Fixed positioning</div>
 
</div>

CSS

.border {
  border: 3px solid #000000;
}

.static {
  position: static;
}

.relative {
  position: relative;
  left: 20px;
}

.relative-container {
  position: relative;
  height: 300px;
  width: 1000px;
}

.absolute-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.absolute-centered {
  position: absolute;
  top: 50%;
  /* left: 50%; */
  width: 100%;
  text-align: center;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
}

.sticky {
  position: sticky;
  top: 0;
}