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

それが相対位置の仕組みです。要素が最初に占有していたスペースはドキュメントから切り出されているため、前の要素の上部の値を調整しても、その下の要素は上に移動しません。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;
}
于 2013-04-04T20:08:37.367 に答える
2

これについて私がやりたいことは、#cover-wrap の親に position:relative を与えることです。これにより、#cover-wrap で position:absolute を使用できるようになります。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 に答える