如何使用CSS将页面元素定位到页面底部？——作品集网站社交栏定位问题求助

Hey there! I see you're building your portfolio site and trying to get that social bar down to the bottom left—let's sort that out for you. Your current CSS has a few conflicting properties that are pushing it out of place, so here's a straightforward fix:

Step 1: Anchor the Social Bar to Your Showcase Section #

First, your .social uses position: absolute, which needs a parent element with position: relative to know where to anchor itself. Add this to your .showcase CSS:

.showcase {
  position: relative;
  /* Keep all your existing styles for .showcase here */
}

This ensures the social bar stays inside the showcase section instead of floating relative to the entire page.

Step 2: Clean Up the .social Class #

Your current .social has unnecessary properties messing with its position. Replace it with this code:

.social {
  position: absolute;
  bottom: 20px; /* Adjust this to control how far up from the bottom it sits */
  left: 20px; /* Adjust this to control how far from the left edge it sits */
  display: flex;
  gap: 20px; /* Adds consistent space between each icon */
  align-items: center;
  z-index: 1;
  /* Removed conflicting properties: scale: 0.09; margin-top: 100%; width: 0%; */
}

The margin-top: 100% was pulling the bar down unnecessarily, and width: 0% was squishing the flex container—removing these fixes the core positioning issue.

Step 3: Fix Icon Spacing #

Your .social li a has margin-left: 40px, which adds extra space before the first icon. Let's remove that and use the gap property on the parent .social instead for even spacing:

.social li {
  list-style: none;
}
.social li a {
  display: inline-block;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
  /* Removed margin-left: 40px; */
}
.social li a:hover {
  transform: scale(0.65) translateY(-15px);
}

What This Does #

After making these changes, your social icons will sit neatly at the bottom left of your showcase section. The hover effect will still work exactly as you had it, and you can tweak the bottom and left values to get the exact spacing you want.

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