CODEWITHSUNDEEP
htmlcss
user2096890
user2096890

Reputation: 159

Relative Positioning leaves a gap

Hi I am trying to use relative position to place my cover-wrap div behind the profile-top div. But, for some reason, it leaves a gap where the cover-wrap div normally goes. What am I doing wrong?

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

Upvotes: 0

Views: 2097

Answers (3)

ntgCleaner
ntgCleaner

Reputation: 5985

What I like to do about this is give the parent of #cover-wrap a position:relative. This will allow your #cover-wrap to have position:absolute. The child of a parent with position:relative can have position:absolute, which would absolutely place the image in a relative area.

When you give the div a position:absolute, you will not have that margin anymore. It makes it easy to do this for dynamic elements as well.

example:

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

Upvotes: 2

cimmanon
cimmanon

Reputation: 68319

That's how relative positioning works. The space the element originally occupied is still carved out of the document, so the elements below it do not shift up when you adjust the preceding element's top value. Converting top to margin-top will get you the effect you're looking for.

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

Upvotes: 2

jacksonfiverniner
jacksonfiverniner

Reputation: 92

You are moving the image from it's original position which effects the text below. You can add a negative margin see 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;
}

Upvotes: 0

Related Questions