Question

在示例中，▼必须降低50px，但它没有发生。为什么不起作用？

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

在您的示例Public void limit(Integer a) { if(String.valueOf(a)<=6) { //do your logic } else { //printout Integer length limit exceeded } }中没有任何效果，您可以删除它以查看。

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

示例：

position: relative;

<强> jsFiddle

这会将.pointer { position: relative; bottom: -50px; }向下.pointer个亲戚移到内容流中的原始位置。

如果你这样做：

50px

这将使下一个兄弟姐妹向上移动.pointer { margin-bottom: -50px; }，我认为这不是你想要的。

<强> jsFiddle

阅读Smashing Magazine的这篇优秀文章 - The Definitive Guide to Using Negative Margins。这非常详细地解释了它。

Answer 2

简而言之， margin-bottom 会影响到下一个项的距离， margin-top 到之前的距离项目即可。更多详情：https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

这就是为什么margin-bottom不能在文本下移动箭头＆＃34;有些文本（无关紧要）＆＃34;。它不是它的角色。您需要使用 margin-top 或 top 。

为了更好地理解，我在代码中添加了另一个元素（在箭头之后），并为每个DIV分配了一个类和背景。

HTML code：

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

CSS代码：

.notice, .first, .pointer, .other { padding: 10px; } .notice { position: absolute; background-color: yellow; } .first { background-color: green; } .notice .pointer { position: relative; margin-bottom: -30px; background-color: aqua; } .other { background-color: red; }

===＆GT;＆GT;＆GT; Here a short demo＆lt;＆lt;＆lt; ===

注意：运行代码并使用 F12 键（或 Ctrl + Shift + I ）打开开发人员工具并修改＆＃34; margin-bottom＆＃34;值。有关开发者工具搜索的更多信息，请访问YouTube＆＃34;更好的CSS编码＆amp;使用开发人员工具进行CSS调试＆＃34;。

Answer 3

以下是解决方案：https://jsfiddle.net/xs8m4jgb/1/

.notice .pointer {
    position: relative;
    margin-top: 30px;
}

Answer 4

您的代码会将元素向上移动，因为您正在设置负边距底部。

如果要将其向下移动，有几个选项，可以使用

transform: translateY(50px); (probably best solution)

top: 50px;

或

margin-top: 50px;

取决于您的使用案例，以及您希望它与其父母相关的行为。

这是你的小提琴，用不同版本编辑： https://jsfiddle.net/xs8m4jgb/3/

Answer 5

你应该对CSS做一些阅读。

为了让某些东西能够下降＆＃34;你不要给负值。＆＃34; - ＆＃34;并不意味着＆＃34; down＆＃34;。

如果希望两个元素之间的距离相互堆叠，则必须指定在这些元素之间放置的值。

保证金只是意味着＆＃34;保证金＆＃34; （或两个元素之间的距离，以便识字）。

所以在你的情况下，因为指针在通知类中 - 你应该指定指针的margin-top。

.notice {
    position: absolute;
}
    .notice .pointer {
        position: relative;
        margin-top: 80px;
    }

https://jsfiddle.net/xs8m4jgb/4/

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

5 个答案: