Nested and multiple <marquee> troubles

Question

Actually I am trying to move some box alternatively with in another box. I made it work, but both the blocks do not interrupt each other. What should I do? How can I make the blocks cross each other? I try using style:position, but it is not working.

Here is the code I have been using:

<marquee direction="down" behavior="alternate" scrollAmount=10 style="border:2px solid blue;">
  <marquee behavior="alternate" scrollAmount=50 >
    <img src="img1.JPG">
  </marquee>
  <marquee behavior="alternate" scrollAmount=10 >
    <img src="img1.JPG">
  </marquee>
</marquee>

What am I doing wrong?

Answer 1

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="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="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.