Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Question

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Is there a way to keep an element fixed on the display without using position: fixed? I want the element to always remain above other elements, so I used z-index. Additionally, I would like the element to be able to move horizontally without scrolling across the display. Here is the code snippet I am currently working with:

<div style="position:relative;z-index:3;height:100%">
  <div style="position:absolute;bottom: -460px;right:-30px;height:100%;">
    <div style="position: sticky;top: 800px;">
      <a class="btn btn-default dropdown-toggle" style="background-color:#00AF95;border-radius:50%;margin-left:100px;" data-toggle="dropdown" onclick="$('#floatingButton').toggle();" data-hover="dropdown" aria-expanded="true">
         <i class="fa fa-plus" style="background-color:#00AF95;color:#f7f8fa"></i>
      </a>
         <div class="dropdown dropdown-inline" style="width:250px;display:block;bottom:80px;">
           <ul class="dropdown-menu SMSUI" role="menu" id="floatingButton" style="display: block;">
             <li class="dropdown" data-hover="dropdown" title="Send SMS to a Number"[enter image description here][1] onclick="(this.event.stopPropagation());">
                 <div id="numberDialerField" class="pad10R pad10L">
                    <input type="text" id="phoneCodeNumber" style="margin-left:10px;width:60px;" name="phoneCode" class="softphone-form-control" data-i18n="[placeholder]phonecode" placeholder="Ph. Code" value="">
                     <span>-</span>
                     <input type="text" id="telNumber" name="phoneNumber" class="softphone-form-control" data-i18n="[placeholder]label_phone_number" placeholder="Phone Number" value="" required="">
                       <div class="telFuncBtnDiv">
                          <span id="backspaceBtnSpan" class="cursor-pointer">
                             <i class="fa fa-check fa-xs"></i>
                          </span>
                       </div>
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

I have included a sample image for reference that shows what I am trying to achieve, although it doesn't quite meet my requirements. My goal is to have the movable element stay fixed without the use of position: fixed.

I want the Icon to stay at this position without position: fixed

html css

Answer 1

Answer №1

To achieve this effect, follow these steps:

Step 1: Parent Element

position: absolute;
...

Step 2: Child Element

position: sticky;
top: 0;
height: 100vh;

Note: Ensure that the parent elements in the DOM hierarchy do not have overflow: hidden. If they do, change it to overflow: visible

Reminder: The child element should be assigned a fixed height, not a percentage value.

Answer 2

To achieve this effect, follow these steps:

Step 1: Parent Element

position: absolute;
...

Step 2: Child Element

position: sticky;
top: 0;
height: 100vh;

Note: Ensure that the parent elements in the DOM hierarchy do not have overflow: hidden. If they do, change it to overflow: visible

Reminder: The child element should be assigned a fixed height, not a percentage value.

Answer 3

Answer №2

To ensure the element is completely independent and positioned hierarchically above other elements, my suggestion would be to relocate the div outside of any nested divs. This will detach it from being a child element of a parent with position:relative applied, potentially resolving any positioning issues you may be encountering.

Additionally, for broader browser compatibility, it is recommended to utilize fixed positioning rather than sticky.

Answer 4

To ensure the element is completely independent and positioned hierarchically above other elements, my suggestion would be to relocate the div outside of any nested divs. This will detach it from being a child element of a parent with position:relative applied, potentially resolving any positioning issues you may be encountering.

Additionally, for broader browser compatibility, it is recommended to utilize fixed positioning rather than sticky.

Answer 5

Answer №3

Updates can be made using the position fixed to the parent with a specified height, and the child can utilize the calc CSS property to achieve the desired effect. For more details, you can refer to the link provided below.

DEMO: https://jsfiddle.net/ssuryar/02hmwkcy/11/

Parent

.position {     position: fixed;    height: 100%;}

Child

.position .row {position: absolute;    left: calc(100% - 60%);    top: calc(100% - 60%);}

Answer 6

Updates can be made using the position fixed to the parent with a specified height, and the child can utilize the calc CSS property to achieve the desired effect. For more details, you can refer to the link provided below.

DEMO: https://jsfiddle.net/ssuryar/02hmwkcy/11/

Parent

.position {     position: fixed;    height: 100%;}

Child

.position .row {position: absolute;    left: calc(100% - 60%);    top: calc(100% - 60%);}

Answer 7

Answer №4

I discovered a solution by utilizing flex within the parent container. In order to position it at the bottom-right of the element, I had to adjust the flex direction.

You can see a functioning example here

.container {
  position: relative;
  
  .parent-container {    
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    
    .sticky-item {
      width: 35px;
      height: 35px;
      background: blue;
      position: sticky;
      bottom: 0px;
    } 
  }
}

Answer 8

I discovered a solution by utilizing flex within the parent container. In order to position it at the bottom-right of the element, I had to adjust the flex direction.

You can see a functioning example here

.container {
  position: relative;
  
  .parent-container {    
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    
    .sticky-item {
      width: 35px;
      height: 35px;
      background: blue;
      position: sticky;
      bottom: 0px;
    } 
  }
}

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

Using the onMessage event in React Native WebView does not seem to have any functionality

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

The AppBar is consuming space and obstructing other elements on the

Unable to insert image into div element

Is there a method to iterate through an HTML quiz in order to extract text from "label for" with the value of "true"?

What is the best way to navigate through a webpage to find a specific folder and show its contents on the page?

Resolving the issue: "Unable to destructure the 'Title' property of 'fac' as it is undefined" in React JS

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Leveraging src css within the React public directory

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

What is the best way to show the totals on a calculator screen?

I want to use flexbox to center three divs on my webpage

Creating a circular array of raycast directions with HTML Canvas 2D

Is there a way to dynamically adjust the height of a DIV block?

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

Is it better to store JSON data locally using cookies or HTML5 local storage?

Shimmering effect on hover for CSS animation

jQuery Toggle and Change Image Src Attribute Issue