无法让嵌套框出现在我的输入字段后面

Question

<!DOCTYPE html>
<html lang='en'>
    <head> 
        <link href="./My stuff/resources/css/index.css" type="text/css" rel="stylesheet">
        <title>Where Magic Happens</title>
    </head>
        <body>
            <div class='outterBox'>
                <form>
                    <div class='enterBox'>
                        <input type='text' placeholder="Enter id" class="enter">
                        <input type='text' placeholder="Enter password" class="enter">
                    </div>
                    <button class='enterButton'>Enter</button>
                </form> 
            </div>
        </body>
     </footer>
</html>

* {
  /* border: 1px solid red; */
  margin: 0;
  padding: 0;
}

.outterBox {
  position: absolute;
  width: 490px;
  margin-top: 40px;
  padding-bottom: 700px;
  background: slateblue;
  bottom: 0;
  left: 0;
}

.enter {
  color: brown;
  position: static;
  border-radius: 4px;
  background-color: gold;
  font-weight: 300; 
  font-family: Helvetica Neue, Helvetica, Sans-serif; 
  align-content: center;
  width: 170px;
  color: black;
  left: 100px;
}

.enterButton {
  color: red;
  position: relative;
  padding-right: 2px;
  z-index: auto;
  font-size: 1.5em;
  border-radius: 3px;
  background-color: skyblue;
  align-content: center;
}

.enterbox { 
  position: absolute;
  height: auto;
  width: auto;
  right: 50px;
  border: 5px solid red;
  z-index: auto;
  margin: 40px;
}

我试图将每个输入字段嵌套在一个框内，但是我无法显示该框。

事实上，痛苦本身很重要，学生的教育将随之而来，但同时也会发生一些巨大的痛苦和磨难。就最小的细节而言，任何人都不应从事任何一种工作，除非他从中得到一些好处。不要在痛斥中生气在快感中痛斥他要从痛中发一毛希望没有滋生。除非他们被欲望蒙蔽了双眼，否则他们不会出来，他们有错放弃了他们的职责和软化了他们的灵魂，即劳动。

Answer 1

CSS 区分大小写，您的方框是 class enterbox（带小写字母 b）但您的 HTML 属性查找 enterBox（大写字母B）。

* {
  /* border: 1px solid red; */
  margin: 0;
  padding: 0;
}

.outterBox {
  position: absolute;
  width: 490px;
  margin-top: 40px;
  padding-bottom: 700px;
  background: slateblue;
  bottom: 0;
  left: 0;
}

.enter {
  color: brown;
  position: static;
  border-radius: 4px;
  background-color: gold;
  font-weight: 300; 
  font-family: Helvetica Neue, Helvetica, Sans-serif; 
  align-content: center;
  width: 170px;
  color: black;
  left: 100px;
}

.enterButton {
  color: red;
  position: relative;
  padding-right: 2px;
  z-index: auto;
  font-size: 1.5em;
  border-radius: 3px;
  background-color: skyblue;
  align-content: center;
}

.enterBox { 
  position: absolute;
  height: auto;
  width: auto;
  right: 50px;
  border: 5px solid red;
  z-index: auto;
  margin: 40px;
}

<!DOCTYPE html>
<html lang='en'>
    <head> 
        <link href="./styles.css" type="text/css" rel="stylesheet">
        <title>Where Magic Happens</title>
    </head>
        <body>
            <div class='outterBox'>
                <form>
                    <div class='enterBox'>
                        <input type='text' placeholder="Enter id" class="enter">
                        <input type='text' placeholder="Enter password" class="enter">
                    </div>
                    <button class='enterButton'>Enter</button>
                </form> 
            </div>
        </body>
     </footer>
</html>

无法让嵌套框出现在我的输入字段后面

Can't get the nested box to appear behind my input fields

html

css

design-patterns

position