web-dev-qa-db-ja.com

ドキュメントフローでスペースを占有せずに要素を相対的に配置する

要素を相対的に配置し、ドキュメントフローのスペースを占有しないようにするにはどうすればよいですか？

htmlcsspositioningcss-position
159
Web_Designer

あなたがやろうとしていることは、絶対位置決めのように聞こえます。一方、幅ゼロ、高さゼロ、相対的に配置された要素を作成することにより、基本的に位置の基準点と絶対配置された要素を作成するためだけに、擬似相対要素を作成できます。その中で：

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

移動したピクセルに等しいマージンを追加します。

例

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

少し読んでみると、親要素が相対的に配置されている限り、要素を絶対配置できます。つまり、CSSがある場合：

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

そうすると、子要素はドキュメントフロー内のスペースをまったく占有しません。次に、「left」、「bottom」などのプロパティのいずれかを使用して配置できます。 「left」、「bottom」などを指定しない場合、デフォルトでは元の位置に配置されるため、親の相対的な位置は通常は影響しません。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

18
jeteon

position: absoluteを設定することにより、ドキュメントフローからその要素を取り出し、コンテンツの動的なフローで自由にブレークポイントを移動したままにしますnotleft top rightおよびbottomスタイルプロパティを指定しますフローの相対エンドポイントを動的に使用するように強制されます。このように、絶対配置された要素はドキュメントフローに従い、スペースを占有することから自身を削除します。

ダミーのラッパーは必要ありません。

3
Bekim Bacaj

私にとって、与えられた解決策はうまくいきませんでした。テキストよりもh3を表示したいので、Bootstrapパネルの後、このパネルに垂直に同期し、右側に他のパネルが表示されます。

Height：0ラッパーで管理し、その後position：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>
0
Reiner

@Bekim Bacajは、OPが探していたものと正確には一致しないかもしれませんが、完璧な答えをくれました（ただし、彼の質問には解釈の余地があります）。そうは言っても、Bekimは例を提供しませんでした。

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

上記の例では、以下の要素を設定しています...

  • 純粋でシンプルなCSSのみを使用します
  • フロー内にあるかのように垂直に配置されます（デフォルトtop設定）
  • ページの右端に水平に配置されます（right: 0）
  • スペースを占有しませんが、ページがスクロールすると自然に移動します（position: absolute）
0
John T.