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

Question

How can I relatively position an element, and have it not take up space in the document flow?

Answer 1

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>

Answer 2

From reading up a little, it seems you can absolute position an element as long as the parent element is relatively positioned. That means if you have the CSS:

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

Then the child element won't take up any space in the document flow at all. You can then position it using one of the "left", "bottom", etc, properties. The relative positioning on the parent shouldn't usually affect it because it will be positioned at its original position by default if you don't specify "left", "bottom", etc.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 3

Add a margin equal to the pixels that you moved:

Example

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}

Answer 4

For me the given solutions did not worked fine. I want to see a h3, than text and after that Bootstrap-panels, vertical-synchroneous to this panels i want to see other panels on the right side,

I managed this with a height:0 wrapper and after that position:relative;left:100% .

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>

Answer 5

You simply take that element off the document flow by setting position: absolute, and leave it's breaking point move freely with the dynamic flow of content by not specifying the left top right and bottom style properties which will be forcing it to use the relative endpoint of the flow dynamically. This way the absolutely positioned element will follow the document flow while removing itself from taking up the space.

No dummy wrappers are needed.

Answer 6

@Bekim Bacaj had the perfect answer for me, even though it may not be exactly what the OP was looking for (although his question leaves room for interpretation). That being said, Bekim didn't provide an example.

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

The example above sets up an element that...

• uses pure and simple CSS and nothing else
• is vertically positioned as if it was in the flow (default top setting)
• is horizontally positioned at the right edge of the page (right: 0)
• does not take up any space, yet will move naturally as the page scrolls (position: absolute)