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

execute operations on a separate webpage

Show on smartphones, conceal on desktops - Activation/URL

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Implementing customized line breaks in PHP using custom fields

Guide to obtaining context vnode within vue 3 custom directives

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

Troubleshooting: Issue with multiple file input elements on page - only the first input is functional and not displaying preview images

Retrieving data from websites through variable access

CSS styling not rendering consistently across various web browsers

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Various image dimensions cause divs to shift unevenly

sending additional parameters within a URL query string

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

Enhanced button effect: image shaded on hover

How can I maintain consistent spacing between two areas in CSS3 across all screen sizes?

Methods for encoding and decoding special characters using either JavaScript or jQuery

Ways to align three divs next to each other in an HTML structure?

"The Zorro table is filled with items of various types, although unfortunately, the Intellisense is not as accurate as it

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized