Question

我正在尝试创建一个位于我创建的div底部的按钮，但是，一旦我在元素上使用margin top，它会移动所有内容，包括按钮（元素）所在的容器太

这是我到目前为止所拥有的：

.background{
    position: relative;
    width: 450px;
    height: 564px;
    background: url(http://placehold.it/450x564) no-repeat;
}
.verify{
    color: #ffffff;
    position: relative;
} 
.link{
    margin: 425px 0px 0px 80px;
    background: url(http://placehold.it/300x41) no-repeat;
    width: 384px;
    height: 51px;
    position: relative;
}

和html：

<div class="background">
      <p class="verify">Confirm your email by following the link below:</p>
      <div class="link"> 
        </div>
</div>

所以基本上我希望背景类是静态的，而容器内的所有元素在调整它们的边距时可以自由移动。有什么想法吗？

Answer 1

正如War19ck建议在您的问题的评论中，您应该将子元素（.link）绝对定位到其父级（.background）：< / p>

.link {
    position: absolute;
    bottom:80px;
    left:33px;
    background: url(http://placehold.it/300x41) no-repeat;
    width: 384px;
    height: 51px;
    border:1px solid red;
}

注意：

我删除了padding！
您已将父母位置设为relative（必填）

的 Fiddle

Margin-top推动整个div而不仅仅是单个元素

1 个答案: