logo标签列表

如何将元素从流中移除？

css
102

我知道使用position: absolute会使元素脱离文档流并停止与其邻居的交互。

还有哪些其他方法可以实现这一效果？

你是指完全从页面中删除它，还是只是让它变得不可见？"与其邻居互动"是什么意思？ - Jason Hall
你想要达到什么目标？ - griegs
我只是觉得有一种方法可以做到，但我想不起来了，所以我去StackOverflow寻求帮助 :) position:absolute可以工作，但我只是想知道。 - Devoted
1
有用的答案：https://dev59.com/eGct5IYBdhLWcg3wqfL9#11917186 - ludovico
9个回答
135

一个让我更容易接受position:absolute的技巧是将其父级元素设为position:relative。这样子元素就会相对于父元素进行'absolute'定位。

jsFiddle

在某些情况下，将 position:absolute 添加到父元素会导致 zIndex 失败（被忽略），这意味着脱离文档流的元素仍然可能被一些内联元素覆盖。从父元素中删除 position:absolute 已经帮助我解决了这个问题。 - DDRRSS
62

除了使用 display: none 将其完全从布局中移除之外，我想那就是它了。

您是否面临着一种情况，在该情况下 position: absolute 不是可行的解决方案？

4
position: absolute 会在滚动时引起重绘，这会对移动设备的性能产生不良影响。 - bafromca
17
当用户看到标题为“从流程中删除”的帖子时，他们期望得到的不是这个答案。display: none会完全将元素从流程中移除。请注意不要改变原文的意思，尽可能使翻译通俗易懂。 - jstice4all
45

另一种选择是将 height: 0; overflow: visible; 设置给一个元素，虽然它不会真正地超出流并且可能会破坏 margin collapsing。

3
@Jessica，使用绝对定位的::before伪元素来模拟背景。 - user
采用这种方式，如果元素位于网格父级中，则该元素也将占用网格单元格，这是不方便的。 - ANeves
6

position: fixed; 也会像你所说的一样将元素从流中"弹出"。

position: absolute 必须与一个位置一起使用，例如 top: 1rem; left: 1rem

position: fixed 会将元素放置在文档流中它通常出现的位置，但之后防止它移动。它还有效地将高度设置为0像素（关于dom），以便下一个元素向上移动。

这非常酷，因为您可以设置position: fixed; z-index: 1（或您需要的任何z-index），使其"弹出"到下一个元素上面。

这对于固定位置的标题很有用，例如当您滚动时它们保持在顶部。

position: fixed z-index: 1会使元素脱离文档流，但该元素仍保持固定位置，不随滚动条滚动。我想要一个元素既能脱离文档流，又能随滚动条滚动。 - Pran Kumar Sarkar
5

有display: none，但我认为这可能比你要找的更多。

2
但即使如此，它仍然是“在附近”...相对于body的绝对位置是唯一可以完全控制其位置的方法。请记住，如果它的父元素被声明为relative，则其绝对原点相对于该元素 - 在这种情况下，您必须将元素附加到document.body或非相对声明的元素。 - Dan Heberden
4
如果元素甚至没有被显示，那么位置就不重要了。 - Greg Hewgill
在Firefox中，具有display: none属性的输入框的验证信息出现在一个毫无意义的位置（覆盖了选项卡顶部）。在该浏览器中，未显示的元素似乎真正没有位置。 - Brilliand
4
为了完整起见： float 属性也将元素从 HTML 的流中移除，例如：
float: right
3
浮动元素可以重新排列流，但是只有使用 position: absolute 才能完全将其从文档流中移除。
2
我知道这个问题已经过了几年，但我认为您想要做的是让一个大的元素，比如一张图片，不会影响到div的高度？
我遇到了类似的情况，我想让一张图片溢出一个div，但我希望它能在一串文本的末尾，所以我不知道它最终会出现在哪里。
我想到的解决办法是将margin-bottom设置为-element的高度，因此如果图片高度为20px，
例如：margin-bottom: -20px; vertical-align: top; 这样它就浮动在div外面，并保持与字符串中的最后一个单词相邻。
-1

尝试使用这个：

position: relative;
clear: both;

当我无法使用绝对定位时，例如在打印时使用page-break-after: always;仅与position:relative一起正常工作时，我会使用它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接