有哪几种方法可以使html脱离文档流?
position: absolute:
会使元素脱离文档流,并且相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素,则相对于 <html>
元素定位。
元素脱离文档流,不再占据空间。
不会影响后续元素的位置和布局。
可以通过 top
、right
、bottom
和 left
来精确定位position: fixed;
使元素脱离文档流,并且相对于浏览器窗口进行定位。它在滚动页面时会保持固定位置,不随页面滚动而移动。
元素脱离文档流,固定在浏览器窗口的某个位置。
即使页面滚动,元素仍然保持在固定位置。
不会影响其他元素的位置。position: sticky;
也是一种脱离文档流的方式,元素会根据页面滚动的情况在某个阈值处变为固定定位。当滚动到特定位置时,元素会粘附在视口的指定位置,直到滚动超出该范围。
元素在正常文档流中显示,直到它到达定义的阈值位置时会“粘附”在指定位置。
只在滚动时发生效果,适用于需要固定头部或侧边栏等场景。
在滚动超过阈值之前,元素会占据空间display: none;
会完全隐藏元素,并使它脱离文档流。该元素不再占据空间,后续的元素将填充它原本所在的位置。
元素完全从页面中消失,连同其占据的空间。
不会影响其他元素的布局。
元素的事件和样式都不会生效,直到使用 display: block
或其他值重新显示。visibility: hidden;
会使元素不可见,但元素仍然占据文档流中的空间。它不同于 display: none;
,元素虽然看不见,但仍然影响其他元素的布局。
元素不可见,但仍占据空间。
不会响应用户交互事件。
不会影响其他元素的相对位置。