输入字段不能在绝对位置工作

Question

我正在制作一个小的web应用程序，只有当用户登录时才会出现。div处于绝对位置，因此它停留在页面的顶部。

下面是HTML：

<div id="open">
    <div id="outerwrapper">
        <div id="holder">
            <button id="titlebar">Open</button>
        </div>

        <div id="wrapper">
            <form>
                <select id="choice">
                    <option value="1">Background Color</option>
                    <option value="2">Menu/Header Colors</option>
                    <option value="3">Fonts</option>
                    <option value="4">Header Font</option>
                    <option value="5">Drag-and-Drop</option>
                </select>
            </form>

            <form>
                <input id="input" type="text" placeholder="colors, font faces, etc"/>
            </form>
            <button id="apply">Apply</button>
        </div>
    </div>
</div>

但是，当div格式为position: absolute时，输入字段不能工作。下拉菜单、文本输入和按钮不起作用。

是否有一种方法可以使div停留在页面顶部，并且仍然能够使用下拉选择、文本输入和按钮？

Answer 1

on元素上有两个position属性。#open有absolute和fixed。我摆脱了绝对，离开了fixed，现在它起作用了。

原始CSS

#open
font-family: $mainfont
position: absolute; \\2 positions is not good
position: fixed;
width: 100%

新CSS

#open
font-family: $mainfont
top: 0px;      \\ I added this
position: fixed; \\ I deleted position: absolute and kept fixed
width: 100%
z-index: 1  \\ You added the z-index: 1 which isn't that necessary since the rest of your elements are static.

Answer 2

是否是按钮标签没有名称值，也没有提交？

所以你可以试试

<button type="submit" id="apply" name="apply" value="insert or submit">Submit</button>

您还需要表单中的select标记中的name="“属性

 <form>
            <select id="choice" name="apply">
                <option value="1">Background Color</option>
                <option value="2">Menu/Header Colors</option>
                <option value="3">Fonts</option>
                <option value="4">Header Font</option>
                <option value="5">Drag-and-Drop</option>
            </select>
        </form>

您还应该有如下的输入

<input id="input" name="input" type="text" placeholder="colors, font faces, etc"/>

我可能只是给你的信息，我用来提交数据下拉到MySQL。

Answer 3

我更改了div的z索引，以便它优先于页面上的其他元素。这似乎解决了这个问题。