如何将按钮定位在距离角落（右上角）一定距离的位置？

Hey there! Let's tackle both of your button positioning questions with practical, easy-to-implement CSS solutions. These are super common UI tasks, so I'll break them down step by step.

1. Positioning a Button at a Fixed Distance from Any Corner #

The core tool here is CSS position property—either absolute (relative to a parent container) or fixed (relative to the viewport, stays put when scrolling). Here's how to make it work:

Example: 20px Offset from Top-Left Corner #

First, if you want the button relative to a specific container (not the whole page), make sure the parent element has position: relative (this anchors the absolute-positioned button to it). Then apply these styles to your button:

.parent-container {
  position: relative; /* Required for absolute positioning inside */
  width: 100%;
  height: 400px; /* Example height */
  border: 1px solid #ccc;
}

.corner-button {
  position: absolute;
  top: 20px;    /* 20px away from the top edge */
  left: 20px;   /* 20px away from the left edge */
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Adjust for Other Corners: #

• Bottom-left: Use bottom: 20px; left: 20px;
• Bottom-right: Use bottom: 20px; right: 20px;
• Top-right: Use top: 20px; right: 20px; (this leads right into your second question!)

Pro Tips: #

• Use em or rem instead of px for responsive offsets (e.g., 1.5em scales with text size)
• Add z-index: 10; if the button gets hidden behind other content
• If you want the button fixed to the viewport (stays visible while scrolling), replace position: absolute with position: fixed

2. Placing a Button Slightly Away from the Top-Right Corner #

This is just a specific case of the first scenario, but let's refine it for the top-right with extra considerations:

Basic Implementation (Fixed Offset) #

For a button that sits 15px from the top and right edges of the viewport (stays put when scrolling):

.top-right-button {
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10; /* Ensure it's above other elements */
}

If You Need It Relative to a Container #

If the button should be inside a header or section (not the whole viewport), set the parent to position: relative and use position: absolute on the button:

.page-header {
  position: relative;
  width: 100%;
  height: 80px;
  background: #f8f9fa;
  padding: 0 20px;
}

.header-button {
  position: absolute;
  top: 15px;
  right: 25px; /* Slightly more space from right than top */
  /* Same button styles as above */
}

Responsive Adjustment #

For mobile screens, you might want to reduce the offset. Use a media query:

@media (max-width: 768px) {
  .top-right-button {
    top: 10px;
    right: 10px;
    padding: 6px 12px; /* Smaller button on mobile */
  }
}

All these examples are ready to drop into your code—just tweak the pixel values or units to match your design needs. Test across screen sizes to make sure the positioning stays consistent!

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