时间戳

首页 > 解决方案 > 红框未按预期放置

html - 红框未按预期放置

问题描述

我试图在代码笔中做到这一点

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，红色框也不会放置在相对于绿色框右侧 20px 的右侧。

为什么呢？

标签： htmlcsspositioningabsolute

解决方案

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>

推荐阅读