Live
x
<div class="fade"></div><div class="modal modal-center"> Hello, world!</div><main> <p>The main distinguishing feature of absolute positioning is that the block seems to be pulled out of the document flow. This element no longer exists for normal flow, so the space it previously occupied is freed up and can be occupied by other elements, if, of course, their width and height allow them to do so.</p></main>
Live
xxxxxxxxxx39
:root { --modal-height: 100px; --modal-width: 100px;}body { margin: 0; padding: 0; font: 18px/1.5 sans-serif;}.fade { left: 0; top: 0; height: 100%; width: 100%; position: absolute; background: rgba(0, 0, 0, 0.7);}.modal { height: var(--modal-height); width: var(--modal-width); padding: 20px; position: absolute; background: #FFFFFF; box-sizing: border-box; font-weight: bold;}.modal-center { left: calc(50% - var(--modal-width) / 2); top: calc(50% - (var(--modal-height) / 2));}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.