HTML CSS

OVERLAP ELEMENTS IN HTML CSS

(quick & simple examples)

DEFINE THE LAYERS <div id="demoA">LAYER ONE</div> <div id="demoB">LAYER TWO</div>

HTML ELEMENT LAYERS

01

POSITION - RELATIVE, ABSOLUTE, FIXED #demoA, #demo B { position: fixed; }

SET LAYERING

02

DEFINE DIMENSIONS #demoA { width: 100px; height: auto; } #demoB { width: 200px; height: auto; }

ELEMENT OFFSET #demoA { top: 5px; left: 5px; } #demoB { top: 15px; left: 15px; }

USE Z-INDEX TO DEFINE LAYERING ORDER #demoA { z-index: 9; } HIGHER = ON TOP #demoB { z-index: 1; } LOWER = BELOW