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

<p>как я могу относительно позиционировать элемент, и чтобы он не занимал место в потоке документов?</p>

<p>то, что вы пытаетесь сделать, звучит как абсолютное позиционирование. с другой стороны, вы можете, однако, сделать псевдо-относительно элемента, путем создания нулевой ширины, нулевой высоты, относительно позиционированный элемент, по существу, исключительно с целью создания опорной точки для позиции, и абсолютно позиционированный элемент в пределах этого:</p><pre><code><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> </code></pre>

<p>добавьте поле, равное пикселям, которые вы переместили:</p><p>пример</p><pre><code>.box { position: relative; top: -30px; margin-bottom: -30px; } </code></pre>

<p>из небольшого прочтения кажется, что вы можете установить абсолютное положение элемента, если родительский элемент относительно позиционирован. это означает, что если у вас есть css:</p><pre><code>.parent { position: relative; } .parent > .child { position: absolute; } </code></pre><p>тогда дочерний элемент вообще не будет занимать место в потоке документов. затем вы можете расположить его, используя одно из свойств «left», «bottom» и т.д. относительное позиционирование на родительском элементе обычно не должно влиять на него, поскольку по умолчанию оно будет позиционировано в исходном положении, если вы не укажете «left», «bottom» и т.д.</p><p> <a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">http://css-tricks.com/absolute-positioning-inside-relative-positioning/</a> </p>

<p>вы просто удаляете этот элемент из потока документов, устанавливая <code>position: absolute</code>, и оставляете его точку разрыва свободно перемещаться с динамическим потоком содержимого, определяя<strong> not </strong>, определяя свойства стиля <code>left top right</code> и <code>bottom</code>, которые заставляют его использовать относительную конечную точку поток динамически. таким образом, абсолютно позиционированный элемент будет следовать за потоком документов, не занимая при этом места. </p><p>никакие пустышки не нужны. </p>

<p>для меня данные решения не сработали нормально. я хочу видеть h3, чем текст, и после этого bootstrap-панели, вертикально синхронизированные с этими панелями, я хочу видеть другие панели на правой стороне, </p><p>мне удалось это с оберткой высоты: 0 и после этого положения: относительная; слева: 100%. </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p>у @bekim bacaj был идеальный ответ для меня, хотя это может быть не совсем то, что искал оп (хотя его вопрос оставляет место для интерпретации). при этом беким не привел пример. </p><pre><code><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> </code></pre><p>в приведенном выше примере настраивается элемент, который ...</p><ul> <li>использует чистый и простой css и ничего больше</li> <li>вертикально расположен, как если бы он был в потоке (настройка <code>top</code> по умолчанию)</li> <li>горизонтально расположен на правом краю страницы (<code>right: 0</code>)</li> <li>не занимает места, но будет естественным образом перемещаться по мере прокрутки страницы (<code>position: absolute</code>)</li> </ul>