如何从流中删除元素？

82

我知道position: absolute会从流中弹出一个元素，并且它停止与其邻居交互。

还有什么其他方法可以实现这一目标？

css

— 献身
source

您是说将其从页面上完全删除，还是使其不可见？“与邻居互动”是什么意思？

— 杰森·霍尔

您想达到什么目的？

— griegs 2010年

我只是想有一个办法做到这一点，我可以不记得，所以我转向StackOverflow的:)位置：绝对的作品，但我只是想知道

— 虔诚

1

有用的答案：stackoverflow.com/a/11917186/11298742

— ludovico19年

61

没有？

我的意思是，除了使用完全将其从布局中删除之外display: none，我很确定就是这样。

您是否面临无法解决问题的特殊情况position: absolute？

— 抹茶
source

4

position: absolute导致滚动时重新绘制，这对移动设备的性能不利

— bafromca 2014年

7

这不是用户希望到达此处时得到的答案，因为标题显示为“从流程中删除”。display: none不仅从流中完全删除元素。

— jstice4all

116

使position:absolute我更加美味的一种技巧是使其成为父母position:relative。这样，孩子相对于父母的位置将是“绝对的”。

jsFiddle

— 乔·弗林
source

37

另一个选择是设置height: 0; overflow: visible;一个元素，尽管它不会真正位于流程之外，因此可能会破坏边距崩溃。

— 用户
source

2

@Jessica，使用::before具有绝对定位的伪元素模拟背景。

— 用户

4

有display: none，但我认为可能要比您要寻找的要多。

— 格雷格·休吉尔
source

2

但是即使那样，它仍然“在附近”。相对于身体的绝对位置是完全控制其位置的唯一方法。请记住，如果其父对象被声明为相对父对象，则它的绝对原点是相对于该父对象的-在这种情况下，您必须将该元素附加到document.body或非相对声明的元素中。

— Dan Heberden 2010年

4

什么？如果元素甚至没有显示，位置无关紧要。

— 格雷格·休吉尔

在Firefox中，带有的输入的验证消息display: none出现在一个毫无意义的位置（在屏幕顶部，覆盖了选项卡）。似乎至少在该浏览器中，未显示的元素确实是无位置的。

— Brilliand13年

3

浮动它会重新组织流程，但要保留位置：绝对是将其从文档流程中完全删除的唯一方法。

— 山姆·鲍勒
source

3

position: fixed;正如您所说，也会从流程中“弹出”元素。:)

position: absolute必须附有职位。例如top: 1rem; left: 1rem

position: fixed但是，将根据文档流将元素放置在通常会出现的位置，但此后阻止其移动。它还有效地将高度设置为0px（相对于dom），以便下一个元素向上移动。

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

例如，这对于滚动时位于顶部的固定位置标头特别有用。

— 布赖恩·刘易斯
source

1

我知道这个问题已经有好几年了，但是我认为您要尝试做的是将其放置在大元素（例如图像）不会干扰div高度的地方？

我只是遇到了类似的情况，我想让图像溢出div，但我希望图像位于文本字符串的末尾，所以我不知道它的最终位置。

我发现一个解决方案是将页边距放在底部：-element的高度，因此，如果图像高20px，

margin-bottom: -20px; vertical-align: top;

例如。

这样，它就漂浮在div的外部，并停留在字符串中的最后一个单词旁边。

— 杰里米·米勒（Jeremy Miller）
source

0

为了完整起见：该float属性也从HTML流程中删除了一个元素，例如

float: right

— 空气5
source

-1

尝试使用此：

position: relative;
clear: both;

我无法使用绝对位置时会使用它，例如，当您使用page-break-after: always;只能与配合使用时，在打印中会使用它position:relative。

— 马西莫
source