Posicionar un elemento de forma relativa sin ocupar espacio en el flujo de documentos

Question

¿Cómo puedo colocar un elemento de forma relativa y que no ocupe espacio en el flujo de documentos?

Answer 1

Lo que intenta hacer suena como posicionamiento absoluto. Por otro lado, puede crear un elemento pseudo-relativo, creando un elemento de posición cero, de altura cero y relativamente cero, esencialmente con el único propósito de crear un punto de referencia para la posición y un elemento absolutamente posicionado dentro de ese:

<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

añadir un margen igual a los píxeles que movió:

Ejemplo

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

Answer 3

de la lectura de un poco, parece que se puede posición absoluta de un elemento, siempre y cuando el elemento padre está relativamente posicionado . Eso significa que si tiene el CSS:

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

Entonces el elemento secundario no ocupará ningún espacio en el flujo de documentos. Luego puede posicionarlo usando una de las propiedades "izquierda", "abajo", etc. El posicionamiento relativo sobre el padre no debe afectar por lo general es porque va a ser colocado en su posición original por defecto si no se especifica "inferior" "izquierda", etc.

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

Answer 4

Para mí las soluciones dadas no funcionaron bien. Quiero ver un h3, que texto y después de eso Paneles de Bootstrap, sincrónicos verticales a este panel quiero ver otros paneles en el lado derecho,

Lo logré con una altura: 0 envoltorio y después de eso posición: relativa; izquierda: 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

simplemente tomar ese elemento fuera del flujo de documentos mediante el establecimiento de position: absolute, y se deja está rompiendo movimiento del punto libremente con el flujo dinámico de contenidos por no especificando las propiedades left top right y bottom estilo lo que obligará a usar el punto final relativo del flujo de forma dinámica. De esta manera, el elemento absolutamente posicionado seguirá el flujo del documento mientras se elimina de ocupar el espacio.

No se necesitan envoltorios ficticios.