Use external shape with position: fixed
I would like the red square to have, position:fixed
in the upper right corner, text that wraps around it and rearranges as it scrolls.
So far I have a using exception shape-outside
(see the fiddle here ) but position:fixed
it doesn't play well with it.
How can I set a red border in the upper right corner when text floats around it when scrolling?
source to share
You cannot scroll the container and keep this floatting element fixed (descending) without the help of javascript.
Here's a demo with a transition and a negative top margin triggered by input that pulls up the text. http://codepen.io/anon/pen/umjDe
THIS IS NOT YOUR solution, but it should help you understand how it might 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 pops your floatting element: http://codepen.io/anon/pen/KafAn
You can use javascript to customize one or the other demo by checking the scroll count :)
source to share
Editing text is only possible with an element that has a block display, but then translation is not possible. Using fixed position, absolute or relative does not work in this case.
In my opinion, the only solution is to write javascript for this task, but it won't be easy.
You can, for example, store each individual word in separate markup and then place the exception where it needs to be within the paragraph.
source to share