Sticky element that doesn't occupy space (like a relative/absolute element) - CSS

Admin 1
Viewed 838

Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.

I need this behavior, but with a sticky element.

I hope the code explains it all:

(also have it on JSFiddle)

const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
    showTooltip = !showTooltip;
  if (showTooltip) {
    tooltip.classList.add('shown');
  } else {
    tooltip.classList.remove('shown');
  }
})
#container {
  height: 19rem;
  overflow-y: scroll;
}
.info {
  background: lightblue;
  padding: .5rem;
}

#tooltip {
  background: gray;
  position: sticky;
  bottom: 0;
  margin: 0 2rem;
  opacity: 0;
  padding: 1rem;
}
#tooltip.shown {
  opacity: 1;
}
<div id="container">
  <div class="content info">
    Click in this div to hide/show the tooltip.
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  
  <div id="tooltip">
    This tooltip should not occupy its initial space at the bottom of its parent div... 
    <br><br><br>
    But yet its space is taken into consideration. Scroll down to see...
  </div>
</div>

Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...

sticky position css dom html
3 Answers

I'm afraid I don't have a sample but I was able to achieve this with something like:

.sticky-element 
{
   position: sticky;
   height: 0px;
   overflow: visible;    // not strictly needed
}

.content
{
   position: relative; 
   top: -100%;          // or calc(-20px - 100%) to add margin
}

Then:

<div class="sticky-element">
   <div class="content">
   ....
   </div>
</div>

In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.

The best thing about this is it doesn't require you to know the height of the sticky element.

There may be some side effects but it's working OK for my needs.

Simon_169400

I think if you switch between

display:none;

and

display: block;

rather than opacity. Then the initial white space that is being occupied at the end will not appear.

user_73640780

You are using opacity: 0; to hide your element.

Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.

The better idea would be to just get rid of it for the time being:

    #tooltip {
  display: none;
}
#tooltip.shown {
  display: block;
}

Here is working JSFiddle: https://jsfiddle.net/dyabgve5/26/

EDIT: I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.

Or.. you can try moving that sticky class behind container like this (it works):

</div> - end of div container

    <div id="tooltip">
        This tooltip should not occupy it's initial space at the bottom of it's parent div... 
        <br><br><br>
        But yet it's space is taken in consideration. Scroll down to see...
      </div>

Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/

user_143534870
Related