Question

CSS Masters的简单问题

我使用div部分创建了两个正方形。第一个是黑色的，里面是红色的。事情就是每当我想把红色正方形移到黑色正方形时，黑色正方形就会随之下降。我怎么能阻止这个？

<div class="black">
  <div class="red">

  </div>
<div>


.black{
  width: 500px;
  height: 500px;
  background: black;
}

我不希望黑色方块掉下来。我该如何阻止它？

.red{
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 50px;
  margin-left: 60px;
}

提前致谢！

Answer 1

无需将其设置为绝对元素。由于您的红色框位于黑匣子内部，您可以使用填充来证明其中的红色方框。

.black {
   width: 500px;
   height: 500px;
   background: black;
   padding-top: 50px;
}

Here is a JSFiddle for it!

Answer 2

尝试将.black的位置设为absolute。

.black {
    width: 500px;
    height: 500px;
    background: black;
    position: absolute;
}

See the JSFiddle here

属性值：绝对

元素相对于其第一个定位（不是   静态）祖先元素

Source

Answer 3

设置黑色div的绝对位置

 position: absolute;

Answer 4

您可以将黑色的位置设置为相对位置，将红色的位置设置为绝对值，如下所示：

.black{
  width: 500px;
  height: 500px;
  background: black;
  position: relative;
}
.red{
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 50px;
  left: 60px;
}

查看JsFiddle

如何使用填充/边距移动div？

4 个答案: