Menu
Situation:
I have a fixed image in my template that overflows the content. Because it's fixed, sometimes the image overflows text. Is there a method that fixes this and makes the text go around the image, as if it is float-ing inside the content div.
See the html-example.
CSS answer is preferred, Javscript/jQuery answers are acceptable.
Some extra details:
#cloud has to stay on the same position with any content.The issue isn't visible on the live website anymore, because it's solved by putting #cloud in a lower z-index layer.
430
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
How to get a child element to show behind (lower z-index) than its parent? is to: Make the parent not a stacking context. Make the child a positioned stacking context , whose z-index smaller than 0.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
What you are looking for is called CSS Exclusions and Shapes. This is relatively new and not widely supported by browsers. You might also be interested in this great article on CSS Exclusions.
65
I believe that this is what you're looking for: http://jsfiddle.net/pG3AG/
The cloud div had to be relatively positioned, not absolute since absolute positioning causes the element to position according to the viewport instead of relative to other elements (like the content element in this case). Also, the right:20px positioning of the box needed to be decreased or removed so that last letters from 'unfinished' words in the line don't end up behind the cloud box.
Hope this works out for you!
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
