How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?-CSS Tutorial-php.cn

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

Susan Sarandon

Release： 2024-12-16 20:38:10

Original

465 people have browsed it

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

How to Position an Element Fixed Vertically But Relative Horizontally

In this scenario, we need a button positioned a fixed distance from the right side of a container, regardless of viewport size. It should also scroll with the window, maintaining a consistent vertical and horizontal offset. To achieve this:

Define a container div (div.inflow) with a fixed width, height, and right margin.
Optionally, add a wrapper div (div.positioner) to position the fixed element horizontally within the container.
Create the fixed element (div.fixed) with a defined width, height, and top margin.
Set position: fixed on the fixed element to anchor it to the viewport.
Refrain from setting left or right on the fixed element. Instead, utilize the container and wrapper divs to establish the horizontal position.

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

Copy after login

CSS:

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

Copy after login

Note: If the container width is not fixed, the wrapper div (div.positioner) is necessary to push the fixed element to the right side of the container.

Important: Setting overflow: hidden on the container has no effect on the fixed position div being outside its boundaries. The fixed position effectively removes it from the container's overflow context.

The above is the detailed content of How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?. For more information, please follow other related articles on the PHP Chinese website!