如何在html中调整表格和图像的位置？

Question

My following code shows that both form and img tags are enclosed with in the same section tag.

But form is displayed above the img. As shown in the figure

I want it to be displayed on the background img. How can I do it?

Answer 1

Form elements are Block level meaning they will take up the entire width of the viewport. If you want it to float ontop of your image, either set the image as a background-image of the section, or even better, absolutely position the form over the top:

section {
  position: relative;
}
form {
  position: absolute;
  top: 0;
  width; 100%;
}