Question

我正试图让文本框在适当的位置漂浮在画布上。

如果我使用id来实现css，它就不起作用。但是如果我在CSS中指定html元素，它就可以了。（但是，我无法操纵独特的文本框）（由canvas标签演示）

小帮？

<style type="text/css">
canvas { position:absolute;
z-index:-1;
top:0px;
left:100px;
}

.wrapper{ height:100%;
width:100%;                 
}

.username { position:absolute;
top:200px;
left:150px;
visibility:hidden;
z-index:1;
}

.password { position:absolute;
top:300px;
left:150px;
visibility:hidden;
z-index:2;
}

</style>

</head>
    <body>
            <div id="wrapper">
                <canvas id = "gamescreen" height = "800" width = "800"></canvas>
                <input type="text" name="username" id="username" /> 
                <input type="password" name="password" id="password" />
            </div>
    </body>

Answer 1

问题是.选择器适用于类。如果您想使用其ID选择元素，则需要使用id前面的#。例：
CSS

#example { 背景：黑色; }

HTML

<div id="example></div>

Answer 2

您实施的是CSS 类。使用div等声明您的class="wrapper"以应用这些样式。您还应该为这些特定样式指定更精细的类，例如input.username，input.password和div.wrapper。或者，如果您希望仅针对特定元素执行此操作，并且不打算在其他任何位置重复使用这些样式，请将.前缀更改为#以匹配元素的id而不是class。

不确定我的CSS无法正常工作的原因

2 个答案: