How Can I Absolutely Position an Element Horizontally and Fixed Vertically?

Position Element Absolutely Horizontally and Fixed Vertically

The goal is to create a button that maintains a fixed distance from the right edge of another element regardless of the viewport size, while scrolling vertically with the window.

Solution

To achieve this, we can use a combination of CSS positioning properties:

<div class="container">
  <div class="button"></div>
</div>

CSS:

.container {
  position: relative;
}

.button {
  position: absolute;
  right: 10px;  /* Distance from the right edge of the container */
  top: 100px;   /* Distance from the top of the viewport */
}

By setting the position of .button to absolute, we make it independent of the normal document flow. The right property specifies the horizontal distance from the right edge of the container, while top defines the vertical distance from the top of the viewport.

Note: This solution creates a fixed element that is horizontally positioned relative to its container, meeting the condition of "fixed vertically, absolute horizontally" in the question.

The above is the detailed content of How Can I Absolutely Position an Element Horizontally and Fixed Vertically?. For more information, please follow other related articles on the PHP Chinese website!