Oh, dear Lord!
Well. They don’t cross because they’re positioned statically one above the other. The second marquee cannot go above the first.
You can solve* this problem by ungluing the marquees from each other using absolute positioning. Then doubly-nest each one with different horizontal and vertical motion:
<div style="border:2px solid blue; position: relative;">
<marquee direction="down" behavior="alternate" scrollAmount="10">
<marquee behavior="alternate" scrollAmount="50"><img src="https://stackoverflow.com/questions/456815/img1.jpeg" alt="oh no" /></marquee>
</marquee>
<marquee direction="down" behavior="alternate" scrollAmount="20" style="position: absolute; top: 0;">
<marquee behavior="alternate" scrollAmount="10"><img src="https://stackoverflow.com/questions/456815/img1.jpeg" alt="help meee" /></marquee>
</marquee>
</div>
*: for values ‘x’ of ‘solve’ where x=’make a hideous mess of’.
This is for illustration purposes only. Please don’t use this.