css: relative position white space problem

Hi all
Relative positioning is always going to leave an empty space equal in size to the element that was moved from its position!
Is there a way to remove that blank space?

 

It's not so much that it leaves a blank space, as the 'rendering box' is moved in relationship to it's 'flow box'. I'd have to see your code, but if you aren't repositioning the element too far it may be you should be using negative margins instead.

 

I must be wrong in this because every book says differently, but as far as I'm concerned, moving something with relative positioning doesn't move the box at all, only a "picture" of the box. That's why the "space" is still there-- the damn box is still there. Still there and still pushing the other boxes out of the way with it's margins or whatever it had. The visual representation of the box that you moved can't push anyone out of the way. It's just a picture that sits over everything, no better than taping some paper to the monitor.

Am I just short-bus confused on this, ds, or is this what you mean with your float and render boxes? Render box just being a picture of the actual box, who holds all the margins etc? I've been calling it The Real Box and The Visual Representation of The Box.

Why I never position stuff with relative positioning.

 

Kind of. I say Flow box because it's the box that effects document flow. I call the other one the render box because it is what is rendered on the screen.

Margins and position:relative (with top/left/right/bottom) change the size and placement of the "flow box" in relationship to the "render box". Width and padding change the size of both. Absolute positioning deletes the 'flow box' outright.

For example, you put margin-left:-100px on a width:200px div, the 'render box' would still be 200px wide, but the flow box would only be 100px wide with the render box hanging over the flow box by 100px to the left.

At least, that's how I think of it. I find once I think of them as two separate sets of numbers dealing with positioning and margins is a LOT simpler.

 

Yeah oops that was a typo float-flow.

I guess that also helps my Ocean Explanation-- the concrete block at the bottom and the thin metal plate sitting on top. Only it sucks as an explanation when it comes to inlines : ) I guess they're just fish.

 

Wow
Thanks all
Yes, work well
This problem fix by add margin-bottom: -value;
margin-bottom: -100px;

 

That will cover up the problem, but what DS meant my using margins was moving the box with the margins instead of the
position: relative;
left: whatever;
top: whatever;

Using margins to push your box around is just safer. I assume if you are moving the bottom margin up, that you had moved you box up with relative positioning?

Try removing position: relative and instead using

margin-top: -100px;


Although that's quite a distance to be moving a box, so the whole set-up you have might be screwy... but anyway, so long as whatever works you understand WHY it's doing what it's doing.