红框未按预期放置

Question

我试着用代码笔来做到这一点

HTML

<body>

<div class="container">

  <div class="red">

  </div>

</div>

<div class="blue">

  </div>

<div class="yellow">

  </div>

</body>



CSS


body{

  margin:0;

}

.container{

  postion:relative;

  height:300px;

  width:300px;

  background-color:green;

}

.red{

  height:100px;

  width:100px;

  background-color:red;

  display:inline-block;

  position:absolute;

  right:20px;

}

.blue{

  height:100px;

  width:100px;

  background-color:blue;

  display:inline-block;

  position:absolute;

  top:100px;

  left:100px;

}

.yellow{

  height:100px;

  width:100px;

  background-color:yellow;

  display:inline-block;

  position:absolute;

  top:0;

}

这就是我的预览图

红色框即使其父级是 div 且名称为 class 的容器也没有放置在相对于绿色框右侧 20px 的右侧。

为什么会这样？

Answer 1

打字错误 postion:relative; 到 position:relative;

.container{
  position:relative;
  height:300px;
  width:300px;
  background-color:green;

}

body{

  margin:0;

}

.container{

  position:relative;

  height:300px;

  width:300px;

  background-color:green;

}

.red{

  height:100px;

  width:100px;

  background-color:red;

  display:inline-block;

  position:absolute;

  right:20px;

}

.blue{

  height:100px;

  width:100px;

  background-color:blue;

  display:inline-block;

  position:absolute;

  top:100px;

  left:100px;

}

.yellow{

  height:100px;

  width:100px;

  background-color:yellow;

  display:inline-block;

  position:absolute;

  top:0;

}

<div class="container">

  <div class="red">

  </div>

</div>

<div class="blue">

  </div>

<div class="yellow">

  </div>

红框未按预期放置

Red box isn't placed as expected

html

css

positioning

absolute