在示例中,▼ 必须向下移动 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>
最佳答案
在您的示例中,position: relative;
在那里没有任何效果,您可以将其删除以查看。
您应该使用 top
、right
、bottom
、left
来处理 position: relative ;
用于间距。
例子:
.pointer {
position: relative;
bottom: -50px;
}
这会将 .pointer
向下移动 50px
到它在内容流中的原始位置。
如果你这样做:
.pointer {
margin-bottom: -50px;
}
这会将下一个 sibling 向上移动 50px
,我认为这不是您想要的。
阅读这篇优秀文章 - The Definitive Guide to Using Negative Margins来自 Smashing 杂志。这解释得非常详细。
关于html - 移动具有相对位置和负边距的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41664541/