要素がドキュメントフローの領域を占有することなく、相対的に配置する

186

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

— ウェブデザイナー
ソース

2

相対的に配置する必要がありますか？絶対配置された要素はドキュメントフローから削除されます。

— Jason Gennaro、

281

あなたがやろうとしていることは、絶対配置のように聞こえます。ただし、基本的には位置の参照点を作成する目的でのみ、幅0、高さ0、相対的に配置された要素、および絶対配置された要素を作成することにより、疑似相対要素を作成できます。その中で：

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

— ナイトファイアキャット
ソース

この場合、どのように幅を継承しますか？相対div幅が0であるため、絶対divが両方がコンテナー内にある場合、幅を適切に継承できません

— Alex H

@AlexH残念ながら、このメソッドはそれを行う方法を提供していません。この場合、FredKの負の位置/負のマージンメソッドを試すことをお勧めします。

— Nightfirecat 2017

101

移動したピクセルと同じマージンを追加します。

例

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

— フレッドK
ソース

5

どういうわけか私には他の答えよりも意味があります

— markasoftware

2

これは機能しますか？私はそれをクロムで試しており、動作しないようです。私は、slidesjsからナビゲーションボタンを配置するために使用しています。

— ペトルザ

1

私はこれを試してみましたがleft: -25px; margin-right: -25px;、何らかの理由で兄弟要素を水平方向に2〜3ピクセルオフセットしています。

— マイク、

float:right;これを画面の右側に相対的にしたい場合の使用を含めて、右または左の値を小さくして管理しやすくします。

— ダミアングリーン

正のtop:値についてmargin-bottom:は、変位ではなく要素の高さのマイナスに等しくする必要があることを覚えておいてください

— Mr Heelis

21

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

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

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

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

— Jeteon
ソース

3

を設定してその要素をドキュメントフローから削除し、フローの相対エンドポイントを動的に使用することを強制するとスタイルプロパティを指定position: absoluteしないことで、コンテンツの動的フローに合わせて自由に移動できるようにします。このようにして、絶対位置に配置された要素は、それ自体がスペースを占有することなく、ドキュメントフローに従います。left top rightbottom

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

— ベキム・バカジ
ソース

単純な例のコードは、パラグラフ全体を読んで理解する代わりに、はるかに役立ちます。コンセプトは明確ですが

— MR_AMDEV

0

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

私はこれを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

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

— ジョンT.
ソース