移动端Web应用预加载器定位问题及fixed元素并排布局求助

1. Positioning position: fixed Elements Side by Side #

There are two straightforward ways to pull this off, depending on whether you want your elements grouped or independently positioned:

Option 1: Use a Fixed Container with Flexbox #

Wrap your fixed elements in a parent container set to position: fixed, then leverage flexbox to align them horizontally. This keeps them organized and easy to adjust:

/* Fixed parent container */
.fixed-container {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 15px; /* Adds space between elements */
  z-index: 100; /* Ensures it sits above other page content */
}

/* Individual fixed elements */
.fixed-item {
  padding: 10px 20px;
  background: white;
  border: 1px solid #ddd;
}

Option 2: Position Each Element Individually #

If you need precise control over each element's placement, set position: fixed on each one and adjust their left/right values manually:

.element-1 {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.element-2 {
  position: fixed;
  top: 20px;
  left: 150px; /* Offset by the width of element-1 plus your desired gap */
  z-index: 100;
}

Pro tip: Always define a z-index to prevent your fixed elements from getting buried under other content.

2. Fixing Your Mobile Preloader Issues #

Let’s tackle the first problem you mentioned (preloader/text not sitting above the overlay) and address common additional issues you might be facing:

Problem 1: Preloader/Text Not Above Overlay #

This almost always boils down to z-index and positioning rules. Remember: z-index only works on elements with a position value other than static (e.g., fixed, absolute, relative). Here’s a corrected, mobile-friendly setup:

/* Semi-transparent overlay */
.preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  z-index: 999; /* Lower than preloader content */
}

/* Preloader container (holds spinner + text) */
.preloader-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers content perfectly on mobile */
  z-index: 1000; /* Higher than overlay to ensure visibility */
  text-align: center;
}

/* Simple preloader spinner */
.preloader-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

/* Preloader text */
.preloader-text {
  color: white;
  font-size: 1.2rem;
  font-family: sans-serif;
}

/* Spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Key fixes here:

• Both the overlay and content use position: fixed
• The overlay has a lower z-index than the preloader content
• Content is centered using transform: translate(-50%, -50%)—this works flawlessly on mobile without layout issues

Common Additional Issues (Your 2nd & 3rd Problems) #

Since you mentioned three total issues, here are solutions to the most frequent ones:

Issue 2: Preloader Doesn’t Hide After Page Load

Add this simple JavaScript snippet to hide the preloader once the page finishes loading:

window.addEventListener('load', function() {
  const overlay = document.querySelector('.preloader-overlay');
  const content = document.querySelector('.preloader-content');
  overlay.style.display = 'none';
  content.style.display = 'none';
});

Issue 3: Preloader Doesn’t Cover Entire Mobile Screen

Ensure your overlay uses 100vw and 100vh instead of width: 100% and height: 100% (which can fail on mobile due to viewport quirks). Also, add this meta tag to your HTML <head> to ensure proper mobile viewport handling:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

内容的提问来源于stack exchange，提问作者Hassan Baig