Question

我正在制作一个只在用户登录时才会显示的小型网络应用程序。分区处于绝对位置，因此它位于页面顶部。

这是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现在它起作用了。

ORIGINAL 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>

你还需要名字=＆＃34;＆＃34;选择标记中的属性如此

 <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-index，因此它优先于页面上的其他元素。这似乎解决了这个问题。

输入字段在绝对定位中不起作用

3 个答案:

ORIGINAL CSS

新CSS