html元素表 - html w3school中文



相對放置一個元素而不佔用文檔流中的空間 (4)

我怎樣才能相對定位一個元素,並讓它不佔用文檔流中的空間?

https://ffff65535.com


你試圖做的事情聽起來像絕對定位。 另一方面,你可以通過創建一個零寬度,零高度,相對定位的元素來創建一個偽相關元素,基本上只是為了創建一個位置的參考點和一個絕對定位的元素其中:

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

對我來說,給定的解決方案並不能很好地工作 我想看到一個h3,而不是文本,之後,Bootstrap面板,垂直同步到這個面板我想看到右側的其他面板,

我用一個高度為0的包裝器和之後的位置來管理它:relative; left:100%。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>


您只需通過設置position: absolute來將該元素從文檔流中取出,並通過指定left top rightbottom樣式屬性而使內容的動態流動自由移動斷點,這將迫使其使用相對端點流動動態。 這樣,絕對定位的元素將遵循文檔流程,同時消除佔用空間。

不需要虛擬包裝。


添加與您移動的像素相等的邊距:

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




css-position