CSS Using Negative Relative Positioning Issue

CSS using negative relative positioning issue

Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.

CSS relative positioning with negative value and height

For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.

In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.

CSS Using position relative+absolute or negative margin

There is nothing wrong with using absolute and relative positioning, they have been fully supported for a long time. Of your two methods I would definitely go with the absolute and relative position one as the margin one is a little hacky.

Personally I would use neither of your methods and instead put #small inside #big as it is a little more semantically correct (because #small is within #big).

See on jsFiddle

HTML

<div id="con">
    <div id="big">
        <div id="small"></div>
    </div>
</div>

CSS

#big {
    width:200px;
    height:200px;
    background:red;
    position:relative;
}
#small {
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    left:50%;
    top:50%;
    background:blue;
}

Elements below an element with relative position and negative top value remain where they are

I am not really sure what you want to achieve, but I hope I get this right.
give the following CSS in your third <div>.Just check :)

   position: relative;
   top: -50px;

or,

   margin-top: -50px;

another way,

div {
    padding: 50px;
}
#div1 {
    background: yellow;
    width:100%;
}
#div2 {
    background: pink;
    position: relative;
    top: -50px;
    width:100%;
    float:left;
}
#div3 {
    background: gray;
    width:100%;
}

JSFiddle

Negative margins vs relative positioning

Relative positioning will shift the content to left, but the original space will be occupied by it unless you make the next element relative too. However with negative margin the content and its original space both are shifted.

How responsible are negative positioning on CSS

Negative values for margin properties are allowed, but there may be implementation-specific limits.

From: http://www.w3.org/TR/CSS2/box.html#margin-properties

All modern browsers (including IE7 and 8) support it, however there are some issues in IE6.

Problems with relative positioning with css

Have you considered a table with three cells in one row? Not entirely sure what the content will be, but that might be an alternate route?

Would this be on only one page? Or across multiple pages? If across multiple pages then you could utilize a Master page with the relevant styling reflecting ContentPlaceHolders?

Negative margin affects the absolute positioned div on same level

Just add this to #top :

float:right;
width:100%;

JSFiddle

---

Related Topics