I want to use the position absolute and position sticky at the same time. Is that possible? If, yes then How?

Question

I want to be able to fix a element on the display and screen at the same position, but don't want to use position: fixed, as it causes problem to other elements. I want the element to be above other elements, so I have used z-index. Also, I want the element to be able to move from side to side, but not scroll across the display. The following is the code that I am 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>

For reference I have attached a sample image that helps understand the solution that I want, but not quite. I want the movable element to stay fixed and not move at all using position: sticky.

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

Hi, what exactly is the problem that `display: fixed` is causing? Maybe we can work around that? And where is the attached image I don't see it. — Coco Liliace, Dec 30 '19 at 07:20
I just added the image. I forgot to do so the first time around. — Gurdain Bhalla, Dec 30 '19 at 07:22
You can set the element to `display: fixed` and just `margin: auto` or flex to align your body — Coco Liliace, Dec 30 '19 at 07:29
Probably this is the same question asked in a different thread https://stackoverflow.com/questions/8328886/sticky-top-div-with-absolute-positioning — Surya R Praveen, Dec 30 '19 at 12:36
Does this answer your question? [Sticky top div with absolute positioning](https://stackoverflow.com/questions/8328886/sticky-top-div-with-absolute-positioning) — leonheess, Sep 06 '22 at 21:51

score 4 · Answer 1 · answered May 02 '21 at 19:15

You can achieve this by:

Parent:

position: absolute;
...

Child:

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

Note 1: Make sure the parent elements (up the DOM tree) do not have overflow: hidden. If so, change it to overflow: visible

Note 2: Make sure the child element is given a fixed height (not %)

score 1 · Answer 2 · answered Dec 30 '19 at 07:30

If the element is truly independent and hierarchically above the other elements, I would move the div out of the other nested divs. Also, by moving it, it will no longer be a child element of your parent that has position:relative applied to it. That is probably the issue you are experiencing with the positioning.

By the way, you will get deeper browser support by using fixed vs sticky.

score 0 · Answer 3 · answered Dec 30 '19 at 12:35

Yes we can update using postion fixed to the parent by setting height. And the child using the calc css property. we are able to achieve it. Here is the link 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%);}

score 0 · Answer 4 · answered Jul 20 '23 at 08:36

I found a way to do it by adding flex to the parent. In my case I needed it to be at the bottom-right of the element, so I had to change the direction of flex to make it work.

Got a working 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;
    } 
  }
}

I want to use the position absolute and position sticky at the same time. Is that possible? If, yes then How?

4 Answers4