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

问题:

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

回答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:

     
         Hi there, I'm 100px offset from where I ought to be, from the top and left.     
 
 

回答2:

Add a margin equal to the pixels that you moved:

Example

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

回答3:

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/

回答4:

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.

回答5:

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

      
         
             
                 
 hello 
             
             
                  whats up?              
             
                 
                     
                         
                             
Panel title
                         
                         
                             
Panel Body
                         
                     
                 
             
              
                 
                     
                         
Panel title
                     
                     
                         
Panel Body
                     
                 
                 
                     
                         
Panel2 title
                     
                     
                         
Panel Body
                     
                 
             
          
         
                      
      
 

文章来源: Relatively position an element without it taking up space in document flow