MENU


Positioning

The positioning systems, in decreasing priority, are:
1. 'absolute' or 'fixed' position.
2. 'flex' or 'grid' display.
3. 'float'ing.
4. normal flow, laying out inline elements (eg. <span>) left-to-right by default, starting a new line when encountering a block element (eg. <div>).

{ top | right | bottom | left } (with the 'position' property)
:auto: lets the browser set the position.
:30px: positions the element so that it is 30px from the 'top', 'right', 'bottom' or 'left' respectively.
:30%: positions the element using a percentage of the available length.

position (with 'top', 'right', 'bottom', 'left')
:static: default; normal flow; the 'top', 'right', 'bottom', 'left', and 'z-index' properties have no effect.
:relative: positioned relative to the original position.
:absolute: removed from the normal flow; positioned relative to the nearest ancestor with a non-'static' 'position'.
:sticky: flows normally, but 'fixed' relative to the scrolling window when scrolling would have hidden the element away originally.
:fixed: removed from the normal flow; positioned relative to the entire viewport (ie. the screen); repeated in the same position on every page when printed.

If 'absolute' instead of 'sticky' is declared for the 'position' property of <span>, the 'Kofi Anna' name tag will be scrolled along with the quote, possibly hidden away from view. Notice that the footer is fixed on the screen, always visible even after considerable scrolling of the whole document.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
main{
   position: relative;
   background: yellow;
   top: 10px;
   width: 230px;
   height: 150px;
   overflow:scroll;
}
q{
   font-size:20px;
   height:120px;
}
span{
   position: sticky;
   background: black;
   color: white;
   height:30px;
   bottom: 0;
   left: 60%;
}
footer{
   position: fixed;
   bottom: 0;
   height: 3em;
   width: 100%;
   background: lightgray;
}
p{
   position: absolute;
   width:150px;
   left: calc(50% - 75px);
}
i{
   position:relative;
   left: 20px;
}
</style></head><body>
   <main>
      <q> We cannot wait for governments to do it all. Globalization operates on Internet time. Governments tend to be slow moving by nature, because they have to buildpolitical support for every step. </q>        
      <span>--Kofi Annan</span><br/><br/><br/>
   </main>
   <footer>
      <p>All rights ...<i>reserved.</i></p>
   </footer>
</body></html>

float (overridden by 'absolute' and 'fixed' 'position')
:none: does not float.
:left: tries to flow towards the left.
:right: tries to flow towards the right.
:inline-start: 'left' for 'ltr' direction, 'right' for 'rtl' direction.
:inline-end: 'right' for 'ltr' direction, 'left' for 'rtl' direction.

clear (with 'float')
:left: moves down to clear past left floats.
:right: moves down to clear past right floats.
:both: no other float object is allowed on the same line.
:none: objects are allowed to float.


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   div{
      float:left; 
      width:30%;
   }
   div:nth-child(1){ 
      height:30px; 
      background: magenta;
   }
   div:nth-child(2){ 
      height:50px; 
      background: cyan;
   }
   div:nth-child(3){ 
      height:70px; 
      background: olive;
   }
   div:nth-child(4){ 
      height:30px; 
      background: orange;
   }
   div:nth-child(6){ 
      height:50px; 
      background:greenyellow;
   }
   div:nth-child(5){ 
      height:70px; 
      background: indigo;
      float: right !important;
   }
   div:nth-child(7){ 
      height:50px; 
      background:brown;
   }
   div:nth-child(8){ 
      clear:both; 
      background: khaki;
   }
</style></head><body style="font-size:20px; width:800px;">   
   <div>1</div>'She
   <div>2</div>sells   
   <div>3</div>seashells   
   <div>4</div>on   
   <div>5</div>the   
   <div>6</div>seashore.'   
   <div>7</div>Can you repeat   
   <div>8</div>this 10 times quickly?   
   I don't think I can.
</body></html>

object-position
:30% 50px: shift 30% of the available width from the left, 50px from the top.
:center center: right top: left bottom

The 'object-position' property can be defined for a replaced element (eg. <img>, <video>, <audio>, <iframe>, <embed>, <object>, <canvas>, <object> and <option>) to shift the position of the displayed content.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   img{
      width:200px; 
      height:200px;
      background:yellow;
   }
   img:first-child{    
      object-position: 50px center;
   }
   img:last-child{    
      object-position: 100px center;
   }
</style></head><body>
   <img src="/shared/scene.jpg"/><br/>
   <img src="/shared/scene.jpg"/>
</body></html>

inset[-block | -inline [ -start | -end ]]
: auto: the initial value.
: 30px: defines the offset at the start/end of the inline flow or block, depending on the 'writing-mode', 'direction' and 'text-orientation' properties, corresponding to the 'top', 'right', 'bottom', and 'left' properties.