父元素设position:relative后，子元素absolute+bottom:0不生效求助

Hey Steve, let's get that navigation menu locked to the bottom of the screen like you want—here's what's going wrong and how to fix it!

The Problem with Your Current Setup #

Right now, you're using position: absolute for .slider-btm. Absolute positioning ties an element to its nearest positioned parent container (in your case, .slider-outer-wrapper with position: relative). That's why the menu only sits at the bottom of that parent div, not the entire browser window.

The Simple Fix: Switch to Fixed Positioning #

To make the menu stick to the viewport (screen) bottom, swap out position: absolute for position: fixed. Fixed positioning anchors elements relative to the browser window, so it'll stay in place even when users scroll.

Here's the updated CSS:

.slider-btm {
  position: fixed; /* This is the critical change */
  width: 100%;
  bottom: 0;
  height: 60px;
  z-index: 10;
  /* Optional: Add left: 0; if you notice the menu isn't spanning the full screen width */
}

Quick Extra Tips #

• Avoid content overlap: If your page has long content, the bottom section will get hidden under the fixed menu. Add padding-bottom: 60px (matching your menu's height) to your main content container to fix this.
• Parent element no longer affects it: Since fixed elements are removed from the normal document flow, the .slider-outer-wrapper's position: relative won't impact this menu anymore—you can leave it as is if it's needed for other elements.
• Z-index check: Ensure z-index: 10 is high enough to keep the menu above other page elements. If it's still getting covered, bump up the value a bit (like z-index: 100).

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