如何让图片画廊中leaderboard图片在响应式布局下始终固定于右上角

Absolutely! You can replicate that fixed top-right leaderboard effect from Pexels with a few key CSS adjustments. Let's walk through fixing your code and implementing this feature properly.

First, Fix the Duplicate ID Issue #

Your current code uses id="overlay" on multiple images, but IDs must be unique per page. Let's convert that to a class instead—this is a critical HTML best practice that prevents unexpected behavior.

Implement Fixed Positioning for the Leaderboard #

To keep the leaderboard pinned to the top-right regardless of scrolling or screen size, we'll use position: fixed (this takes the element out of the normal document flow and anchors it to the viewport). We'll also add a high z-index to ensure it stays above other gallery content.

Here's the revised, working code:

Updated CSS

* { box-sizing: border-box; }
body { 
  margin: 0; 
  font-family: Arial; 
  /* Add right padding to prevent gallery content from hiding under the fixed leaderboard */
  padding-right: 220px; 
}
img { 
  opacity: 1; 
  background-color: rgba(0, 0, 0, 0.5); 
  -webkit-transition: all .4s ease-in-out; 
  transition: all .4s ease-in-out;
}
.overlay:hover { 
  opacity: 0.7; 
  background-color: rgba(0, 0, 0, 0.5); 
}
.row { 
  display: -ms-flexbox; /* IE10 fallback */ 
  display: flex; 
  -ms-flex-wrap: wrap; /* IE10 fallback */ 
  flex-wrap: wrap; 
  padding: 0 20px; 
}
.column { 
  -ms-flex: 25%; /* IE10 fallback */ 
  flex: 25%; 
  max-width: 25%; 
  padding: 10px; 
}
.column img { 
  margin-top: 20px; 
  vertical-align: middle; 
  width: 100%;
}
/* Core styles for the fixed leaderboard */
.js-leaderboard {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* Ensures it stays above all other content */
  width: 200px; /* Adjust this size to match your needs */
}
.js-leaderboard img {
  margin-top: 0; /* Override column image margin for the leaderboard */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 800px) { 
  .column { 
    -ms-flex: 50%; 
    flex: 50%; 
    max-width: 50%; 
  }
  body {
    padding-right: 120px;
  }
  .js-leaderboard {
    width: 100px; /* Shrink leaderboard on medium screens */
  }
}
@media screen and (max-width: 600px) { 
  .column { 
    -ms-flex: 100%; 
    flex: 100%; 
    max-width: 100%; 
  }
  body {
    padding-right: 100px;
  }
  .js-leaderboard {
    width: 80px;
    top: 10px;
    right: 10px; /* Tighten spacing on mobile */
  }
}

Updated HTML

<html>
<body>
<div class="row">
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" class="overlay"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" class="overlay"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" class="overlay"></a>
</div>
<div class="column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" class="overlay"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" class="overlay"></a>
</div>
</div>
</body>
</html>

Key Details to Note #

• position: fixed: This anchors the leaderboard to the viewport, so it stays in place even when scrolling.
• z-index: 1000: Ensures the leaderboard sits above all other gallery content—adjust this number if you have other layered elements.
• Viewport Padding: We added padding-right to the body to prevent gallery images from being hidden underneath the fixed leaderboard.
• Responsive Adjustments: The media queries shrink the leaderboard and adjust padding on smaller screens to maintain a clean, usable layout.
• Unique Classes: Swapped duplicate id="overlay" to class="overlay"—IDs can only be used once per page, which avoids styling conflicts.

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