Html CSS-将复选框置于前面_Html_Css

Html CSS-将复选框置于前面

html css

Html CSS-将复选框置于前面,html,css,Html,Css,我在这里发现了一个与我类似的问题，但被接受的答案并没有解决我的问题我已经做了自定义复选框，我正试图把它们带到前面。这是我的html： <!DOCTYPE HTML> <html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <script src="javascript.js"></script

我在这里发现了一个与我类似的问题，但被接受的答案并没有解决我的问题

我已经做了自定义复选框，我正试图把它们带到前面。这是我的html：

<!DOCTYPE HTML>
<html>
    <head>
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
        <script src="javascript.js"></script>
    </head>
    <body>
        <div id="Title">
            <img src="" alt="WifiFinder.img" id="WifiFinderImg">
            <input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
        </div>
        <div id="AccountRegistration">
            <h2>Username</h2>
            <input class="userinfo" type="text" value="Username Here"/>
            <h2>Email Address</h2>
            <input class="userinfo" type="email" value="Email Address"/>
            <h2>Date of Birth</h2>
            <input class="userinfo" type="date" value="DD/MM/YYYY"/>
            <h2>Password</h2>
            <input class="userinfo" type="password" value="Password"/>
            <h2>Retype Password</h2>
            <input class="userinfo" type="password" value="Password"/>
            <label class="container">I have Read and Accept the Terms and Conditions
                <input type="checkbox">
                <span class="checkmark"></span>
              </label>
              <label class="container">I have Read and Accept the Privacy Statement
                   <input type="checkbox">
                   <span class="checkmark"></span>
              </label>
              <input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
        </div>
    </body>

当我将复选框的位置从“相对”更改为“绝对”时，它似乎起作用，但问题是，对于不同大小的屏幕，它们位于页面的不同部分

这是工作片段

：根目录{
--主色：#0052CC；
--次要颜色：#172B4D；
--第三种颜色：#FFFFFF；
}
身体{
背景色：var（--第三色）；
利润率：0%；
}
#头衔{
位置：绝对位置；
宽度：100%；
身高：30%；
背景色：var（--主色）；
利润率：0%；
}
#WifiFinderImg{
位置：绝对位置；
身高：100%；
宽度：50%；
左：0%；
底部：0%；
利润率：0%；
}
/*帐户注册页面上的主要内容*/
#帐户注册{
字号：x大号；
位置：绝对位置；
身高：70%；
溢出y：滚动；
底部：0%；
颜色：var（--主色）；
宽度：100%；
文本对齐：居中；
边框：var（--二次色）1px实心；
}
/*类设置帐户创建的用户输入字段的样式*/
.userinfo{
字体大小：大号；
宽度：40%；
边界：0px；
边框底部：1px var（--主色）纯色；
文本对齐：居中；
颜色：浅灰色；
}
/*自定义标签*/
.集装箱{
显示：块；
位置：相对位置；
左侧填充：35px；
利润率最高：2%；
利润底部：2%；
光标：指针；
字号：x大号；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认复选框*/
.容器输入{
位置：相对位置；
不透明度：0；
光标：指针；
}
/*创建自定义复选框*/
.对号{
位置：相对位置；
顶部：4px；
左：0；
高度：25px；
宽度：25px；
背景颜色：浅灰色；
显示：内联块；/*已添加*/
}
/*在鼠标悬停时，添加浅灰色背景色*/
.container:悬停输入~。选中标记{
背景颜色：浅灰色；
}
/*选中复选框后，添加主颜色背景*/
.container输入：选中~.checkmark{
背景色：var（--主色）；
}
/*创建复选标记*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示选中标记*/
.容器输入：选中~。选中标记：之后{
显示：块；
}
/*设置复选标记的样式*/
.容器。选中标记：之后{
左：9px；
顶部：5px；
宽度：5px；
高度：10px；
边框：实心变量（--第三颜色）；
边框宽度：0 3px 3px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
/*类设置所有内容按钮的样式*/
.按钮{
位置：相对位置；
左边缘：-10%；
利润率最高：-5%；
利润底部：2%；
最高：150%；
左：5%；
字号：x大号；
宽度：20%；
身高：10%；
边框：1px var（--主色）纯色；
文本对齐：居中；
背景色：var（--主色）；
颜色：var（--三级颜色）；
}
/*内容按钮的悬停操作*/
.按钮：悬停{
背景色：var（--二次色）；
边框颜色：var（--第二颜色）；
}
/*标题中的按钮*/
.头扣{
宽度：15%；
身高：10%；
位置：绝对位置；
排名前10%；
右：2%；
边框：1px var（--第三颜色）实心；
文本对齐：居中；
背景色：var（--主色）；
颜色：var（--三级颜色）；
}
/*标题中按钮的悬停操作*/
.头部按钮：悬停{
背景色：var（--第三色）；
边框颜色：var（--第三颜色）；
颜色：var（--主色）；
}


用户名
电子邮件地址
出生日期
密码
重新输入密码
我已阅读并接受条款和条件
我已阅读并接受隐私声明

问题确实在于您（在整个代码中）使用了相对位置和绝对位置

因为您已经提到复选框在多个位置使用，所以您需要找到一种应用不同样式的方法。为此，我将在这里添加另一个类

替换此项：

<span class="checkmark"></span>

为此：

<span class="checkmark customCheckmark"></span>

CSS技巧可能能够更深入地解释这一点。

注意：作为一般的经验法则，尽量不要使用太多的位置亲戚和绝对词，它们在大多数情况下会弄乱你的CSS。如果您是CSS的初学者，请尝试使用Flexbox，它比传统的CSS更容易学习和实现。

当我改变这一点时，它会显示原来的复选框。当我在下面创建一个自定义复选框时，我将它们隐藏起来。当我将其更改为绝对值时，它会扰乱自定义复选框在不同分辨率屏幕上的位置。我只是在寻找一种方法来将元素放在前面。如果您在多个页面中使用了这些复选框，请尝试使用不同的类。让我编辑我的答案，以包括该案例。

.checkmark {
    position: relative;
    top: 0;
    left: 35%;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }

<span class="checkmark customCheckmark"></span>

.checkmark {
    position: relative;
    top: 0;
    left: 35%;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }
  .checkmark.customCheckmark {
    position: absolute;
    top: auto;
    left: auto;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }