Appending html code problem

[amber radish]

I have a function that creates a sort of container. The problem is that it should create a new container every time I write some text and append it to the body, instead it puts the new text over the old one and it doesn't create a new container every time.
This is the function:

  controlerEl.innerHTML = "";
  const note = document.createElement("div");
  note.classList.add("note-box-container");

  note.innerHTML = "...html code here"
  document.querySelector("body").appendChild(note);
}```

And here are some ss on what is happening:

[empty matrix]

What's the CSS for them?

Since it's an issue with the visuals of it, less so the html, it's very likely your CSS.
I would guess you've used position absolute on the relevant stuff?

[amber radish]

Yes, you are right. That was the problem. I had no idea that could be a possibility for this behavior. Thank you!

[empty matrix]

Everything to do with looks is CSS, if anything manages to overlap it's going to be caused by some CSS that is either moving one elemnt up into the other, or (since in this case they are both the same element) they have styling that has taken them out of the default layout. With newer devs this tends to be mistakes with position: absolute; since it's the hacky but easy way to position stuff
I'd reccomend you find an alternative way to control the layout/containers, and save position absolute for positioning certain small elements relative to containers like close buttons and stuff.