Position:Relative Leaves an Empty Space

position:relative leaves an empty space

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

How to remove whitespace that appears after relative positioning an element with CSS

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

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & 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 reworked example code becomes 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">     buy this!</div><div class="footerallowedwhitespaceinblue"></div><div class="footer"></div>

How do I remove white space due to position relative of CSS?

This is a good time to use flexbox. Have a look.

#wrapper {  display: flex;  border: 1px solid black;  width: 65%;  min-width: 720px;  margin: 0 auto;}#imageStyle {  margin: 10px 60px;}#featuresStyle {  margin: 10px 0;  flex: 1;}#featuresStyle h2:first-child {  margin-top: 0;}/* Just to show it working */
#wrapper {  background: navy;}#featuresStyle {  background: lime;}#imageStyle {  background: tomato;}

<div id="wrapper">  <div id="imageStyle">    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXMyE-1O_Be_qDQa7YwQGW8DLhNEeNVlOXgKj9BMGdKVsRbSdoYw" />  </div>  <div id="featuresStyle">    <h2>Name: Ibanez M8M</h2>    <br/>    <h2>Price: $30000</h2>    <br/>    <h2>Description: Good Guitar!</h2>    <br/>    <h2>Neck Type: Bla Bla Bla</h2>    <br/>    <h2>Body: Bla Bla Bla</h2>    <br/>    <h2>Fretboard: Bla Bla Bla</h2>    <br/>    <h2>Bridge: Bla Bla Bla</h2>    <br/>    <h2>Neck Pickup: Bla Bla Bla</h2>    <br/>    <h2>Bridge Pickup: Bla Bla Bla</h2>    <br/>    <h2>Hardware Color: Bla Bla Bla</h2>    <br/>  </div></div>

Css position absolute leaves white space at the top

It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.

Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:

/* header block */header {    height: 536px;    background-color: #ddd;    background-position: center;    background-size: 100% 536px;    background-repeat: no-repeat;    overflow: hidden;}
header .header-wrapper {    position: relative;    overflow: auto;    z-index: 2;}
.header-slogan-1 {    font-size: 32px;    font-weight: 700;    font-style: italic;    margin-top: 88px;}
.header-wrapper .header-info {    position: absolute;    top: 0;    z-index: 3;    background-color: #4caf50;    max-width: 600px;    padding: 25px 25px 25px 75px;    color: #fff;}
.text-center {  text-align: center;}

<header>   <div class="header-wrapper">      <div class="header-slogan-1 text-center">Base info</div>                 <div class="header-info">Info</div>   </div></header>

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

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:

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

Remove space for css position:relative

Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/

HTML

<table>
    <tbody>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.google.com" ></iframe>
                </div>
            </td>
        </tr>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.donotwant {
    border:2px dotted green;
}
.top {
    top:80px;
    left:120px;
    position:relative;
    z-index:2;
    background:red;
}
.bottom {
    position:relative;
    z-index:1
}
.collapse {
    line-height:0px;
}

Position absolute TD leaves empty space after making visible

Remove position: absolute; and your code will work.

$("tr").hover(function() {    $(this).find(".abs").show();  },  function() {    $(this).find(".abs").hide();  });

.abs {  display: none;  background: #fff;  margin-top: -40px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>  <tr>    <td>123</td>    <td class='abs'>456</td>  </tr></table>

Position:Relative Leaves an Empty Space