Real Project

Let's create the foundation for a modal window using best positioning practices.

/* 1. Overlay on entire screen */
.modal-overlay {
  position: fixed;
  inset: 0; 
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px); /* Beautiful background blur */
}

/* 2. The window itself */
.modal-content {
  position: relative; /* To position close button inside */
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
}

/* 3. Close button */
.modal-close {
  position: absolute;
  top: 15px; right: 15px;
  cursor: pointer;
  padding: 10px; /* Increase click area */
}

Why Did We Do It This Way?

• Fixed + Inset: Overlay covers entire browser window, even if we scroll.
• Flexbox: Perfectly centers window vertically and horizontally.
• Relative + Absolute: Allows " pinning " close button to window corner, not the entire screen corner.