在 css 中使用 top 和负 margin-top答案

【问题标题】：Usage of top and negative margin-top in css在 css 中使用 top 和负 margin-top
【发布时间】：2014-06-29 18:34:24
【问题描述】：

谁能解释一下下面代码中top, left and margin-left and margin-top 的用法？我看到我们给了 top 一个值，还给了 margin-top 一个 negative 值。这实际上实现了什么？

#volume {
    width: 250px;
    height: 13px;
    border: 1px solid;
    position: absolute;
    cursor: pointer;
    background: #dddddd;
    top: 80%;
    left: 35%;
    margin-left: -125px;
    margin-top: -15px;
    box-shadow: inset 0 0 12px #dddddd;
}

http://codepen.io/anon/pen/rbliK

【问题讨论】：

在该示例中似乎没有实际理由将它们结合起来。
top 是关于定位的，margin-top 指定元素周围的边距（而 padding 是关于元素内部的填充。
在这个例子中，两者都做同样的事情
看到这个stackoverflow.com/questions/4036176/css-top-vs-margin-top
事实上，结合top 和margin-top 可以帮助您找到一种解决方法来支持与calc() 类似的功能，在这种情况下，它类似于使用top: calc(80% - 15px)。然而，也许代码编写者不想在这里使用calc 方法，因为它的支持。它也不完全等同于使用calc。

标签： html css

【解决方案1】：

边距描述了您的框与相邻框之间的空间。设置负上边距表示您希望块上方有负间距。简单来说，控制相邻框间距的边距和正值top-margin 将内容向下推，负值top-margin 将内容向上拉。

另一方面，top 和 left 是 positional 属性，用于指定您的盒子所在的位置。 top left bottom right 属性指定框的各个边缘的位置，包括其边距。

如果你希望元素对周围元素没有影响，你可以使用topleftbottomright

点击此处了解更多信息：

link

【讨论】：