Question

我有一个项目，我需要在其中添加弹出表单。这是我的项目结构。

<body>
   <div class="header">ART Compiler Explorer </div>
   <div class="container">
        <div class="box1">

                <div id="inside" >
                        <label for="input-file" class="custom-file-upload">Select Java File</label>
                        <select class="tab" name="android" id="android">  </select>
                </div>
                <textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
                </textarea>
         </div>
        <div class="box1 box2">
                <div id="second" >
                        <select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
                        <button type ="button" class="btn"  onclick='this.form.submit()'>Refresh</button>
                </div>
        </div>
    </div>
</body>

我想在div id="inside"下添加弹出式表单其代码结构如下：

<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
    <div class="imgcontainer">
    </div>
    <div class="container_form">
    </div>
</div>

我面临的问题是弹出窗口没有像上面的链接那样完全出现，而是被前半文本编辑器隐藏了（请参阅蓝色线，它向左移动）。

似乎div id "id01"弹出窗口在div id ="inside"内留下了单独的空间，因此无法正常显示。请建议我如何解决此问题，因为我必须在div id="inside"下添加弹出表单，但是此弹出表单本身包含另一个div，这两个空格分开。请帮助我解决此问题。

Answer 1

由于z-index，弹出窗口不会越过文本区域，请将z-index:4添加到弹出模式中，以便它可以位于文本区域的顶部。

.modal {
    z-index:4
 }

在没有单独作用域的另一个div中添加div

1 个答案: