放置区框外的表单域

Question

我正在使用 dropzone.js 进行拖放文件上传。我还有两个字段和一个提交按钮，但它们只出现在预览窗格中，尽管它位于自己的 <div> 标记中。我希望它显示在

下方

CSS:

    #attachmentdropzone {
        cursor: pointer;
        border: 3px dashed #0000FF;
        padding: 30px 0;
    }

HTML:

<div class="container">
<form action="{{ url_for('upload') }}" method="POST" class="dropzone" enctype="multipart/form-data"
      id="attachmentdropzone">

    <div class="dropzone-previews"></div>
    <div class="container">

        <input type="email" name="username"/>
        <input type="password" name="password"/>

        <button type="submit">Submit data and files!</button>
    </div>
</form>

我要修复的当前布局。我想要蓝色虚线外的表单字段和按钮。

编辑：在 fiddle 中：https://jsfiddle.net/boavzunL/

Answer 1

我添加了以下 CSS Class(Your Example):

.container {
     position: absolute;
    margin-top: 75px;
    width:100%;
}

放置区框外的表单域

Form Fields outside dropzone box

html

javascript

css

dropzone.js