How to remove spaces that appear after relative positioning of an element using CSS

Question

I looked far and wide for this problem and finally found a solution on some obscure forum on google page number 10. The solution is in the answer

The following problem occurs: After the relative positioning of the element with CSS, I get a space where the element was ... I do not want a space!

.thetext { width:400px; background:yellow; border: 1px dashed red; margin:50px; padding:5px; font-weight:bold; } .whiteblob { position:relative; top:-140px; left:70px; width:200px; height:50px; border: 4px solid green; background:white; font-size:2.5em; color:red; } .footerallowedwhitespaceinblue { height:10px; background-color:blue; } .footer { background-color:grey; height:200px; } 

 <div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script> </div> <div class="whiteblob"> &nbsp;buy this! </div> <div class="footerallowedwhitespaceinblue"> </div> <div class="footer"> The whitespace above is way to big! The buy this still takes up space whilst it is moved. </div> 

JSFiddle: http://jsfiddle.net/qqXQn/

As you can see in the example, the only empty space I want is a space caused by a block of text along the edge of 50 pixels; and the gap between the footers (blue so that it is visible). The problem is that the gap is too large, because the “buy this” div still takes place after it has been relatively positioned.

How to solve this?

Answer 1

You can simply solve this by applying a negative margin equal to the width or height of the element.

For an element with a height of 100 pixels, which is located above, you will apply margin-bottom: -100px;

For an element with a height of 100 pixels, which is located below, you apply margin-top: -100px;

For an element with a width of 100 pixels, which is located on the left, you apply margin-right: -100px;

For an element with a width of 100 pixels, which is located on the right, you will use margin-left: -100px;

cut and paste css snippets:

 .top { postion:relative; top:-100px; height:25px; margin-bottom:-25px; } .bottom { postion:relative; top:100px; height:25px; margin-top:-25px; } .left { postion:relative; left:-100px; width:25px; margin-right:-25px; } .right { postion:relative; left:100px; width:25px; margin-left:-25px; } 

And the code with the reworked example will then:

 .thetext { width:400px; background:yellow; border: 1px dashed red; margin:50px; padding:5px; font-weight:bold; } .whiteblob { position:relative; top:-140px; left:70px; width:200px; height:50px; margin-bottom:-50px; border: 4px solid green; background:white; font-size:2.5em; color:red; } .footerallowedwhitespaceinblue { height:10px; background-color:blue; } .footer { background-color:grey; height:200px; } 

 <div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script> </div> <div class="whiteblob"> &nbsp;buy this! </div> <div class="footerallowedwhitespaceinblue"> </div> <div class="footer"> </div> 

http://jsfiddle.net/qqXQn/1/

Answer 2

Here is an example. In this case, the object was moved to the right, and then up, using a negative upper value. Eliminating your back margin space required the addition of an equal negative margin value.

  position:relative; width:310px; height:260px; top:-332px; margin-bottom:-332px; left:538px; 

Answer 3

You can solve this problem by specifying float: left before position: relative. Use also the fields to the left and left above, and not above, also to the left.

Answer 4

If you are brave enough, you can put overflow:hidden; and bottom negative margin on a relatively positioned element, and it will remove the remaining distance :), that is, on a responsive site.

But check to see if it hides the necessary content.

Answer 5

set the relative size of the elememt element for the parent font, for example, this code:

html in jade pattern:

 div.dialog(id='login') div.dialog-header span.title login a.dialog-close(href="") X hr div.dialog-body p hello this is body hr div.dialog-footer p this is footer 

and css:

  .dialog { height: 100%; position: absolute; top: -100%; right: 50%; left: 50%; bottom: 100%; border: 2px solid rgba(255, 255, 255,1); border-radius: 3px; font-size: 14px; } .dialog-body{ position: relative; background-color: #F99; height: 80%; top: -14px; } .dialog-header{ position: relative; height: 10%; background-color: #F9F9F9; } .dialog-footer{ position: relative; height: 10%; top: -28px; background-color: #F9fdf9; } 

it worked for me!

Answer 6

Set the outer div as "position: relative" the div you want to move as "position: absolute", and set the top and left values. this will position the element relative to the outer div (not the page). relative position leaves blanks. absolute not.

Answer 7

This did not work for me, having 4 separate relative positions interconnected. I could not get it to work, even adding and rearranging each of them:

This is currently optimized (see http://christ.eye-of-revelation.org/index.html 2nd page), but in all cases they are used to select the image area according to the size of the medium or window. ..

The solution was global and much simpler; it was also used for two separate blocks to simulate and replace two pages: all problems were resolved by determining the width and height of the area and simply setting its style = "overflow: hidden"

Hope this helps.

Answer 8

set the height to 0: height:0px; .

Now this div can be placed anywhere.