Question

您好我正在尝试使用相对位置将我的封面包裹div放在profile-top div后面。但是，由于某种原因，它留下了封面包装div通常会出现的空白。我做错了什么？

CSS：

#cover-wrap {
position: relative;
top: -65px;
height: 250px;
width: 470px;
background: url('https://sphotos-a.xx.fbcdn.net/hphotos-    
ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

这就是相对定位的工作原理。元素最初占用的空间仍然是从文档中雕刻出来的，因此当您调整前面元素的最高值时，它下面的元素不会向上移动。将top转换为margin-top将为您提供所需的效果。

http://jsfiddle.net/QPZEk/4/

#cover-wrap {
    margin-top: -65px;
    height: 250px;
    width: 470px;
    background: url('https://sphotos-a.xx.fbcdn.net/hphotos-ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 2

我喜欢做的是给＃cover-wrap的父母一个位置：亲戚。这将允许你的＃cover-wrap有位置：绝对。具有position：relative的父级的子级可以具有position：absolute，这绝对会将图像放在相对区域中。

当你给div一个位置：绝对时，你将不再有这个余量。它也可以很容易地为动态元素执行此操作。

示例：

#parent {
    position:relative;
}

#cover-wrap {
    height: 250px;
    width: 470px;
    background: url('https://sphotos-a.xx.fbcdn.net/hphotos-    ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 3

您正在移动图像的原始位置，这会影响下面的文字。您可以添加负边距，请参阅http://jsfiddle.net/QPZEk/3/

#cover-wrap {
position: relative;
top: -65px;
margin-bottom:-65px;
height: 250px;
width: 470px;
background: url('https://sphotos-a.xx.fbcdn.net/hphotos-ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

相对定位留下了空白

3 个答案: