Here is an insight on how web browsers work and how do we get to see the web-pages on our systems -
1. DOM and CSS Object Model Construction - In the very first step of the rendering engine, HTML document is parsed and the parsed elements are converted into nodes in the DOM tree. Each element in the tree is represented to be a parent node, within which the child elements are contained.
2. Layout - When a renderer is added to the tree after creation, it does not have any size or position. Layout is the means of calculating those values.
3. Painting - In Painting, the paint() method is called to render the UI infrastructure, custom styles, etc. on the component. Painting occurs either globally, where the whole render tree is painted at once, or in incremental order, where the elements are stacked context wise.
4. Layered Display of Elements-The z-index property of an element deducts where the element will be placed in the stack. In the stack, elements which are aligned at the back gets painted first and elements with higher z-index value are arranged on the front and get painted at the last.