Use shape-outside with position:fixed

Question

I would like a red square to have position:fixed in the top-right corner, text that wraps around it and rearranges when scrolling.

So far I have an exclusion using shape-outside (see Fiddle here) but it does not play well with position:fixed.

How can I have the red box fixed in the top-right, with the text flowing around it when scrolling?

Answer 1

You cannot scroll the container and keep this floatting element fixed (going down ) without some help from javascript.

Here is a demo with a transition and a negative margin-top, triggered with an input, wich pulls up the text. http://codepen.io/anon/pen/umjDe

THIS IS NOT your solution, but it is suppose to help you understand how this can work.

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

---

another example that pushes down your floatting element : http://codepen.io/anon/pen/KafAn

You may via javascript tune one or the other demo , checking on amount scrolled :)