How to Fix an Element Vertically and Position it Absolutely Horizontally?

How to Position an Element Fixed Vertically and Absolute Horizontally

In web development, it is often necessary to position elements in a way that remains consistent regardless of the viewport size. One such scenario is to fix an element vertically, while maintaining a specific horizontal distance from another element.

Consider the following challenge: you need a button to maintain a consistent distance from the right side of a container div. The button should remain at a fixed vertical position within the viewport, regardless of the size of the viewport.

Achieving the Desired Positioning

This is possible by utilizing the combination of position: fixed and position: absolute, as demonstrated in the following code:

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

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

The key to this approach lies in not explicitly setting the left/right properties for the .button element. Instead, the container div and an additional div (.positioner) are used to establish the horizontal positioning.

The .button element inherits its horizontal position from the .container div, while the .positioner div pushes the .button towards the right side of the container div. In this example, the .button element maintains a distance of 15px from the right edge of the container div.

Additionally, the .button element's fixed vertical position (top: 60px) ensures that it remains at that vertical location within the viewport as the page scrolls.

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