How to have form below canvas

问题

I am trying to put a form below the red canvas. https://imgur.com/a/5dwPgeP shows what happens currently. I have tried different Divs and placing them in different code sections but nothing seems to be working. Please help me thank you. Code:

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" type="text/css" href="WEBSITE.css">
    <!-- Load the Paper.js library -->

    <script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>


</head>
<body>
    <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>
</body>
</html>

and css:


html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
}

Any help is appreciated, I think using a container or something would help.

回答1:

From my understanding,you want the form to be below the canvas.According to my assesment,your canvas is postioned as fixed meaning is positioned relative to the viewport(device), which means it always stays in the same place even if the page is scrolled Try the solution below:

body {
    margin: 0;
  
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 50vh;
    background-color: red;
  
}

   <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>

来源：https://stackoverflow.com/questions/62198219/how-to-have-form-below-canvas

标签

html

css

paperjs