有哪几种方法可以使html脱离文档流？

前进之路 · 2025-1-4 02:07:51

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

position: absolute:会使元素脱离文档流，而且相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于 <html> 元素定位。

元素脱离文档流，不再占据空间。
不会影响后续元素的位置和布局。
可以通过 top、right、bottom 和 left 来正确定位

position: fixed; 使元素脱离文档流，而且相对于欣赏器窗口进行定位。它在滚动页面时会保持固定位置，不随页面滚动而移动。
        元素脱离文档流，固定在欣赏器窗口的某个位置。
        即使页面滚动，元素仍旧保持在固定位置。
        不会影响其他元素的位置。

position: sticky; 也是一种脱离文档流的方式，元素会根据页面滚动的情况在某个阈值处变为固定定位。当滚动到特定位置时，元素会粘附在视口的指定位置，直到滚动超出该范围。
        元素在正常文档流中显示，直到它到达定义的阈值位置时会“粘附”在指定位置。
        只在滚动时发收效果，适用于需要固定头部或侧边栏等场景。
        在滚动凌驾阈值之前，元素会占据空间

display: none; 会完全隐藏元素，并使它脱离文档流。该元素不再占据空间，后续的元素将添补它原本所在的位置。
        元素完全从页面中消失，连同其占据的空间。
        不会影响其他元素的布局。
        元素的事件和样式都不访问效，直到使用 display: block 或其他值重新显示。

visibility: hidden; 会使元素不可见，但元素仍旧占据文档流中的空间。它不同于 display: none;，元素虽然看不见，但仍旧影响其他元素的布局。
元素不可见，但仍占据空间。
不会响应用户交互事件。
不会影响其他元素的相对位置。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

有哪几种方法可以使html脱离文档流？

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块