Relatively Position an Element Without It Taking Up Space in Document Flow

Relatively position an element without it taking up space in document flow

What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

Does setting position to relative on a div takes it out of document flow?

No it doesn't. relative positioning doesn't affect the layout, the positioned element is still in its initial place logically, hence the occupied space is reserved.

But it could be displaced visually by top, right, bottom, left offsets/properties.

9.3.1 Choosing a positioning scheme: 'position' property

relative The box's position is calculated according to the normal flow (this is called the position in normal flow). Then
the box is offset relative to its normal position. When a box B is
relatively positioned, the position of the following box is calculated
as though B were not offset. [...]

How to remove whitespace that appears after relative positioning an element with CSS

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext {    width:400px;    background:yellow;    border: 1px dashed red;    margin:50px;    padding:5px;    font-weight:bold;}.whiteblob{    position:relative;    top:-140px;    left:70px;    width:200px;    height:50px;    margin-bottom:-50px;    border: 4px solid green;    background:white;    font-size:2.5em;    color:red;    }.footerallowedwhitespaceinblue{    height:10px;    background-color:blue;}.footer{    background-color:grey;    height:200px;}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script></div><div class="whiteblob">     buy this!</div><div class="footerallowedwhitespaceinblue"></div><div class="footer"></div>

Elements taking over the space of an element with position absolute

You don't need position: absolute to align things to top just use margin: 0 on the body, h1 Like:

body, h1 {
  margin: 0;
}

Have a look at the snippet below:

body, h1 {  margin: 0;}
div {  background: #888888;  width: 100%;  height: 100px;}

<!DOCTYPE html><html><body bgcolor="#000000">
<div>    <h1>HEADER</h1></div>
<img src="http://placehold.it/304x228" alt="Mountain View" style="width:304px;height:228px;">
</body>

How can I avoid spaces after moving a relatively positioned element?

I have an<article> element inside a <div> and article has a position: relative;.
I moved it up 95px (bottom: 95px;) but the space it took up in its original place remained there.

Well, this is how relative positioning is supposed to work – http://www.w3.org/TR/CSS21/visuren.html#choose-position:

“When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.”

So the original space required by a relatively positioned element gets reserverd.

How can I make that disappear? When I do the same with article positioned as absolute, there is no problem. But I need to stick this to the middle too and margin: auto won't work with position:absolute.

Have you tried just using a negative margin-top to “move” the element upwards? This should work in all browsers (that are not from the stone age). And you can still set the horizontal margins to auto to have your element centered.

.trdown {
  /* everything else besides position and bottom stays */
  margin:-85px auto 0 auto;
}

(If this destroys the spacing at the bottom of the container element that you want to keep, then give that a padding-bottom as well.)

Relatively Position an Element Without It Taking Up Space in Document Flow