Css 使用外部形状和位置：固定

我想要一个红方块，在右上角有

position:fixed

，文本环绕它，滚动时重新排列

到目前为止，我已经排除了使用

shapeoutside

（参见Fiddle）的情况，但它不能很好地使用

位置：fixed

---

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

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

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

---

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

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

这是一个演示，带有一个过渡和一个负边距顶部，由一个输入触发，它拉起文本

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

#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;
}

---

下推浮动元素的另一个示例：

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