Question

我想要一个红色方块，右上角有position:fixed，文字环绕它并在滚动时重新排列。

到目前为止，我使用shape-outside进行排除（请参阅小提琴here），但它与position:fixed的效果不佳。

如何在右上角固定红色框，滚动时文字会在其周围流动？

Answer 1

如果没有javascript的帮助，您无法滚动容器并保持此浮动元素固定（向下）。

这是一个带有过渡和负边距的演示，用输入触发，它会拉动文本。 http://codepen.io/anon/pen/umjDe

这不是你的解决方案，但它可以帮助你理解它是如何工作的。

#exclusion { 
      shape-outside: rectangle(-20px, 0, 150px, 150px, 50%, 50%);
      float: right;
      width: 150px;
      height: 150px;
      background-color: red;
}
:checked ~ article  p {
  margin: -50% 0 0;
}
p {
  transition:4s;
}
article {
  margin:0;
  border:solid;
  overflow:hidden;
}

另一个推送浮动元素的示例：http://codepen.io/anon/pen/KafAn

您可以通过javascript调整一个或另一个演示，检查滚动量：）

Answer 2

只有具有块显示的元素才能重新排列文本，但是无法进行翻译。在这种情况下，使用固定位置，绝对位置或相对位置都不起作用。

在我看来，唯一的解决方案是为该任务编写一个javascript，但这并不简单。

例如，您可以将每个单词保留在单独的标记中，然后将其排除在段落中的所需位置。

使用shape-outside与position：fixed

2 个答案: