我有一个元素，我需要在其中添加弹出表单。这是我的元素结构。
<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 ，它会形成单独的空间.
请帮我解决这个问题。
最佳答案
由于 z-index，弹出窗口不会出现在文本区域上，将 z-index:4 添加到您的弹出模式，以便它可以出现在文本区域。
.modal {
z-index:4
}
关于javascript - 在没有单独范围的情况下将 div 添加到另一个 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55725194/