如何解决不占用空间的粘性元素如相对/绝对元素-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,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>
注意:使用“显示”代替答案中建议的“位置”也不起作用。确实可以防止工具提示在不显示时占用空间,但是在显示时仍会考虑其空间...
解决方法
我想如果你在两者之间切换
display:none;
和
显示:阻止;
而不是不透明。这样一来,最后占用的初始空白将不会出现。
,您正在使用 Month P_name ER F1 F2 F3 F4 F5 F6 F7
196307 P1 3.2952484 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P10 6.4787957 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P2 2.8880775 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P3 4.3508301 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P4 4.2523679 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P5 4.3096580 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P6 4.6813736 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P7 4.3431163 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P8 7.0482478 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 P9 7.3539587 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196307 PLS 3.1835473 -0.39 -0.56 -0.83 0.27 -0.47 0.66 -1.15
196308 P1 -0.4837659 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P10 -0.8704307 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P2 -1.8642527 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P3 -2.0056693 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P4 -1.2075884 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P5 -3.0759695 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P6 -2.1879341 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P7 -0.7625329 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P8 -0.9208842 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 P9 -2.5052435 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196308 PLS -0.3866648 5.07 -0.94 1.67 0.25 -0.79 0.40 -0.40
196309 P1 -0.1691145 -1.57 -0.30 0.18 0.27 -0.48 -0.76 0.24
196309 P10 7.7057777 -1.57 -0.30 0.18 0.27 -0.48 -0.76 0.24
196309 P2 0.4863887 -1.57 -0.30 0.18 0.27 -0.48 -0.76 0.24
196309 P3 -0.8416363 -1.57 -0.30 0.18 0.27 -0.48 -0.76 0.24
196309 P4 -0.4628775 -1.57 -0.30 0.18 0.27 -0.48 -0.76 0.24
隐藏元素。
在听起来不错的地方,该元素仍然存在,只是透明的。想想现实生活中真正打磨过的窗户。您可能永远不会承认该窗口,但它仍然存在并且正在占用空间,如果您不知道,则可能会撞到窗口并严重伤害自己。
更好的主意是暂时将其清除:
opacity: 0;
这里正在使用JSFiddle: https://jsfiddle.net/dyabgve5/26/
编辑: 我明白了你的意思。我认为您应该覆盖#container div,因为它们会干扰您的粘性类div。
或者..您可以尝试将粘性类移动到这样的容器后面(它可以工作):
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
工作中的JSFiddle:https://jsfiddle.net/83k1xwt5/29/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。