如何刪除與CSS相對定位元素後出現的空白

Question

我一直在尋找這個問題的範圍很廣，最終在谷歌的第10頁的一些不起眼的論壇上找到了解決方案。解決方法是在答案

發生的問題如下： 在用CSS相對定位一個元素後，我得到了元素的空白處......我不想要空白！

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

正如你所看到的例子，我想唯一的空白是由由50像素的保證金thetext塊的空白;和藍色的足跡空白的間距（變成藍色使其可見）。 問題是...現在空白太大，因爲「買這個」div仍然佔據了相對定位後的空間。

我該如何解決這個問題？

Answer 1

您可以簡單地通過應用等於元素寬度或高度的負邊距來解決此問題。

對於位於頂部的100px高度的元素，您將應用margin-bottom：-100px;

對於定位到底部的100px高度的元素，您將應用margin-top：-100px;

對於位於左側的100px寬度的元素，您將應用margin-right：-100px;

對於定位在右側的100px寬度的元素，您將應用margin-left：-100px;

切&糊CSS片段：

.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; 
    } 

而返工實例代碼變得那麼：

.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

下面是一個例子。在這種情況下，該對象被移動到右側，然後使用負的最高值。消除其尾部空白空間需要增加相等的負邊際值。

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

Answer 3

將外部div設置爲「position：relative」您想要移動的div爲「position：absolute」，並設置頂部和左側值。這將相對於外部div（不是頁面）定位項目。相對位置留下空白。絕對不會。

Answer 4

將高度設置爲0：height:0px;。

現在這個div可以放在任何地方。

Answer 5

設置相對elememt頂部父字體大小這樣的代碼：

在HTML模板玉：

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 

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

    } 

這個工作對我來說！

Answer 6

您可以通過在position：relative之前給出float：left來解決此問題。使用保留餘量，保證金頂部屬性而不是頂部，左側也是。

Answer 7

如果您足夠勇敢，您可以在相對定位的元素上放置overflow:hidden;和bottom negative margin，並且它將移除剩餘空間:)即響應站點上。

但是檢查它並不隱藏需要的內容。

Answer 8

這對我來說不起作用，有4個獨立的聯鎖互相的相對位置。 我無法得到它的工作，甚至添加和重新定位每一個：

目前，這是優化（見http://christ.eye-of-revelation.org/index.html第2頁），但在所有的情況下，它們被用來亮點根據媒體或窗口大小的圖像區域...

該解決方案是全球性的，更容易;它也被用於兩個獨立的塊來模擬和交換兩頁：所有問題都可以通過定義寬度和高度來解決一個區域，並且只需設置其style =「overflow：hidden;」即可。

希望這可以幫助。