绝对定位（position absolute）元素响应式实现：图片滑块箭头适配问题求助

Hey there! Let's get those arrow buttons working properly across all screen sizes. The root issue here is that you're using fixed em values for positioning the arrows, which don't scale along with your slider's width when the viewport shrinks. Here's a straightforward fix to bind the arrows directly to your slider:

Key Changes to Implement #

• Move arrows inside the slider container: This makes the slider the positioning context for the arrows, so they'll stay relative to it no matter the screen size.
• Use percentage/relative positioning: Ditch fixed em offsets for positioning—instead, use left: 0/right: 0 for horizontal placement and vertical centering that adapts to the slider's height.
• Adjust sizing with responsive units: Use rem or % for arrow sizes so they scale with the viewport.

Modified Code #

HTML #

<div class="container"> 
  <div class="slider">
    <img src="https://i.ytimg.com/vi/suIr-M1p8yU/maxresdefault.jpg" alt=""> 
    <!-- Move arrows inside the slider to inherit its positioning context -->
    <div class="arrows"> 
      <a href="#" class="left"><<</a> 
      <a href="#" class="right">>></a> 
    </div>
  </div> 
</div>

CSS #

.container{ 
  max-width:1100px; 
  margin: 0 auto; 
  width:100%; 
  height: auto; 
} 

.slider{ 
  position: relative;
  /* Add aspect ratio padding to give the slider a stable height (since image is absolute) */
  padding-top: 56.25%; /* 16:9 ratio, adjust if your image uses a different aspect */
  overflow: hidden;
} 

.slider img{ 
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  object-fit:cover; 
} 

.arrows { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use flexbox to easily position arrows at both ends and center vertically */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem; /* Prevent arrows from touching screen edges on small devices */
  pointer-events: none; /* Let clicks pass through to the slider background if needed */
} 

.arrows a { 
  font-size: 2rem; /* Responsive font size that scales with viewport */
  color: white; 
  border: 2px solid #fefefe; 
  border-radius: 4px; 
  padding: 0.25rem 0.75rem; 
  background: #F2B8A2;
  pointer-events: all; /* Restore click functionality for the arrow links */
  text-decoration: none;
  /* Add a subtle hover effect for better UX */
  transition: background-color 0.2s ease;
}

.arrows a:hover {
  background: #e89a7f;
}

Why This Works #

• By nesting .arrows inside .slider (which uses position: relative), the arrows are now tied directly to the slider's boundaries—they'll never drift outside or disappear when the viewport shrinks.
• Flexbox's justify-content: space-between automatically pins the left arrow to the start and right arrow to the end of the slider, no fixed pixel/em offsets required.
• align-items: center keeps arrows vertically centered regardless of the slider's height, and the padding ensures they stay visible even on narrow mobile screens.
• The padding-top on .slider maintains a consistent aspect ratio, so the slider has a predictable height that the arrows can align with.

This setup will keep your arrows perfectly synced with the slider, no matter how much the viewport changes size.

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