html - 移动具有相对位置和负边距的元素

Question

在示例中，▼ 必须向下移动 50 像素，但它并没有发生。为什么没有效果？

jsfiddle 示例是 here .

.notice {
  position: absolute;
}
.notice .pointer {
  position: relative;
  margin-bottom: -50px;
  border: 1px solid red;
}

<div class="notice">
  Some text(No matter)
  <div class="pointer">▼</div>
</div>

Answer 1

在您的示例中，position: relative; 在那里没有任何效果，您可以将其删除以查看。

您应该使用 top、right、bottom、left 来处理 position: relative ; 用于间距。

例子:

.pointer {
  position: relative;
  bottom: -50px;
}

jsFiddle

这会将 .pointer 向下移动 50px 到它在内容流中的原始位置。

如果你这样做:

.pointer {
  margin-bottom: -50px;
}

这会将下一个 sibling 向上移动 50px，我认为这不是您想要的。

jsFiddle

阅读这篇优秀文章 - The Definitive Guide to Using Negative Margins来自 Smashing 杂志。这解释得非常详细。