Относительно позиционировать элемент, не занимая места в потоке документа

Ответ 1

То, что вы пытаетесь сделать, звучит как абсолютное позиционирование. С другой стороны, вы можете, однако, сделать псевдо-относительно элемента, путем создания нулевой ширины, нулевой высоты, относительно позиционированный элемент, по существу, исключительно с целью создания опорной точки для позиции, и абсолютно позиционированный элемент в пределах этого:

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

Ответ 2

Добавьте маржу, равную пикселям, которые вы переместили:

Пример

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

Ответ 3

Из немногочисленного чтения вам кажется, что вы можете установить абсолютное положение элемента до тех пор, пока родительский элемент будет относительно позиционирован. Это означает, что если у вас есть CSS:

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

Тогда дочерний элемент вообще не займет места в потоке документа. Затем вы можете расположить его, используя один из свойств "слева", "снизу" и т.д. Относительное расположение на родительском объекте обычно не влияет на него, поскольку по умолчанию оно будет помещено в исходное положение, если вы не укажете "левый", "нижний" и т.д.

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

Ответ 4

Вы просто удалите этот элемент из потока документа, установив position: absolute, и оставьте его точкой прерывания свободно перемещающимся динамическим потоком содержимого не, указав стиль left top right и bottom свойства, которые заставят его динамически использовать относительную конечную точку потока. Таким образом, абсолютно позиционированный элемент будет следовать за потоком документа, удалив себя из занимаемого пространства.

Никаких фиктивных оберток не требуется.

Ответ 5

Для меня эти решения не работали нормально. Я хочу видеть h3, а не текст, и после этого панели Bootstrap, вертикально-синхронные с этими панелями, я хочу видеть другие панели с правой стороны,

Мне это удалось с помощью обложки height: 0 и после этой позиции: relative; left: 100%.

<link href="#" onclick="location.href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'; return false;" 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>