CSS Relative Positioning with Negative Value and Height

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 Relative Positioning with negative top percentage

-50% is going to be 50% of the height of a parent object, in this case 200px. So your vertical is getting offset 100px. Since you know the width of your widget (73px), just use the specific offset, -36px

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

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

position:relative leaves an empty space

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

negative top value makes parent div higher

The red space you see is the space that the .innera-rel would take up if it was not positioned. This space stays "occupied", you just move the div around relative to that space. If you do not want this to happen you have to use absolute positioning.

---

Related Topics