MENU


Visibility

visibility
:visible: the object is visible
:hidden: the object is invisible but takes up space
:collapse: a table column or row is removed

backface-visibility
:visible: the backside is visible(after rotation)
:hidden: the backside is invisible(after rotation)

display
:none: no space is used to display the object
(outside)
     :block: breaks lines before and after element
     :inline: does not break lines
(inside)
     :flow-root
     :table
     :flex
     :grid
(internal)
     :list-item
     :table
     :table-caption
     :table-cell
     :table-column
     :table-column-group
     :table-footer-group
     :table-header-group
     :table-row
     :table-row-group

Repeating the same  div> block, the second block is displayed as a table.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   div:last-child { display:table; }
   div:last-child p {display:table-row; }
   div:last-child span {display:table-cell; }
   span {border:1px solid black; }
</style></head><body>
   <div>
      <p><span>1</span>     
         <span>2</span></p>
      <p><span>3<br/>3<br/>3<br/></span>
         <span>4</span>
         <span style="vertical-align:middle;">5</span>
         <span style="vertical-align:bottom;">6</span></p>
   </div>
   <div>
      <p><span>1</span>      
         <span>2</span></p>
      <p><span>3<br/>3<br/>3<br/></span>
         <span>4</span>
         <span style="vertical-align:middle;">5</span>
         <span style="vertical-align:bottom;">6</span>
      </p>
   </div>
</body></html>

z-index (with non-static 'position' property)
:auto: the stack order equals that of the parent
:-3: sets the stack order to be -3. A larger stack order causes the object to appear in front, overlapping objects with a smaller stack order.

opacity
:0.5: sets the opacity to 0.5. A value of 0 means fully transparent while 1.0 means fully opaque.

'inline' by default, <button>s can be listed vertically down by changing their 'display' property to 'block'. Below, with a smaller z-index, button 2 appears behind button 1, even though button 2 is specified at later stage.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   button{display:block; position:relative;}
</style></head><body>
   <button style="z-index:10;">1</button>
	<button style="top:-10px; left:1vw; z-index:-10;">2</button>
	<button style="visibility:hidden;">3</button>
	<button style="opacity:0.5;">4</button>
</body></html>