时间戳

首页 > 解决方案 > 不占用空间的粘性元素（如相对/绝对元素） - CSS

html - 不占用空间的粘性元素（如相对/绝对元素） - CSS

问题描述

绝对或相对定位的元素不会占用其在文档中的初始空间，因此其他元素的行为就好像它不存在一样。

我需要这种行为，但有一个粘性元素。

我希望代码能解释一切：

（也有它在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>

注意：使用答案中建议的“显示”而不是“位置”也不起作用。它确实可以防止工具提示在不显示时占用空间，但是在显示时仍然会考虑它的空间......

标签： htmlcssdompositionsticky

解决方案

恐怕我没有样本，但我能够通过以下方式实现这一目标：

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

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

然后：

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

换句话说，实际的粘性元素的高度为零，因此它不占用空间，并且您将内容向上移动它自己的高度。

最好的一点是它不需要你知道粘性元素的高度。

可能会有一些副作用，但它可以满足我的需要。

推荐阅读