0

嗨，我正在尝试使用相对位置将封面 div 放在 profile-top div 后面。但是，由于某种原因，它在封面包装 div 通常去的地方留下了一个空白。我究竟做错了什么？

JSFIDDLE：http: //jsfiddle.net/QPZEk/1/

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;
}
4

3 回答 3

2

这就是相对定位的工作原理。该元素最初占用的空间仍然从文档中切出，因此当您调整前一个元素的顶部值时，它下面的元素不会上移。将顶部转换为边距顶部将为您提供所需的效果。

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;
}
于 2013-04-04T20:08:37.367 回答
2

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

当您给 div 一个 position:absolute 时，您将不再有该边距。它也使得对动态元素执行此操作变得容易。

例子：

#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;
}
于 2013-04-05T00:00:31.720 回答
0

您正在将图像从其原始位置移动，这会影响下面的文本。您可以添加负边距，请参阅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;
}
于 2013-04-04T19:52:35.070 回答