40

発生する問題は次のとおりです。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/

例でわかるように、必要な唯一の空白は、thetext ブロックによって 50px のマージンで発生する空白です。フッターによるスペースは、青で許可されたホワイトスペースです（青にして見えるようにします）。問題は...「これを買う」divが相対的に配置された後もスペースを占有しているため、空白が大きすぎることです。

これを解決するにはどうすればよいですか？

4

8 に答える 8

56

要素の幅または高さに等しい負のマージンを適用することで、これを簡単に解決できます。

上部に配置された高さ 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/

于 2012-12-05T11:19:11.090 に答える
5

ここに例があります。この場合、オブジェクトは右に移動され、次に上に負の値を使用して上に移動されました。末尾のマージン スペースを削除するには、等しい負のマージン値を追加する必要がありました。

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;
于 2013-01-12T07:12:16.673 に答える
3

float:left を position:relative の前に指定することで、この問題を解決できます。top, left の代わりに、margin-left、margin-top プロパティを使用します。

于 2015-04-20T07:57:50.490 に答える
-2

高さを 0: に設定しますheight:0px;。

これで、この div をどこにでも配置できます。

于 2015-03-02T18:47:05.740 に答える