43

これが私のレイアウトの簡略化です：

    <div style="position: relative; width:600px;">
        <p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>
        <div>Content of unknown height</div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
    </div>

私が抱えている問題は、テキスト/不明な div コンテンツが長すぎると、絶対に配置された div と重なってしまうことです。

私はウェブとSOを検索して解決策を探しましたが、絶対に配置されたdivがある場所に目に見えないdivを配置することを提案した唯一のものが見つかりました.または私はここでポイントを逃しています）。

jqueryルートをたどる前に、CSSソリューションを考えられる人はいますか?

4

9 に答える 9

40

私にとっての解決策は、不明な長さのコンテンツの最後に 2 つ目の非表示の div を作成することでした。この非表示の div は、絶対配置の div と同じサイズです。これにより、コンテンツの最後に常にスペースが確保されます。絶対配置div。

この回答は以前にここで提供されていました: 絶対位置の要素がテキストと重なるのを防ぐ ただし、右下に配置された div に適用する方法は (今まで) わかりませんでした。

新しい構造は次のとおりです。

<div id="outer" style="position: relative; width:450px; background-color:yellow;">
        <p>Content of unknown length</p>
        <div>Content of unknown height </div>
        <div id="spacer" style="width: 200px; height: 25px; margin-right:0px;"></div>
        <div style="position: absolute; right: 0; bottom: 0px; width: 200px; height: 20px; background-color:red;">bottom right</div>
    </div>

これで問題は解決したようです。

于 2012-09-13T14:24:47.183 に答える
12

簡単な答え: CSS のみを使用してそれを行う方法はありません。

より長い（より長い）答え：なぜですか？を行うposition: absolute;と、要素がドキュメントの通常の流れから外れるため、残念ながら、テキストが要素と位置関係を持つ方法はありません。

考えられる代替手段の 1 つはfloat: right;あなたdivの .

于 2012-09-10T18:30:14.670 に答える
7

サイズが不明な要素を操作していて、それらまたはその兄弟要素で使用したいposition: absolute場合は、必然的にオーバーラップに対処する必要があります。絶対位置を設定することにより、ドキュメント フローから要素を削除しますが、必要な動作は、要素が兄弟によって押し出されて、重複しないようにすることです...つまり、フローする必要があります! あなたは2つの完全に相反するものを求めています。

レイアウトを再考する必要があります。

おそらく.btn、共通の親に対してではなく、前の兄弟の 1 つに対して要素を絶対的に配置する必要があるのではないでしょうか? その場合、position: relativeボタンを配置したい要素を設定し、ボタンをその要素の子にする必要があります。絶対配置を使用してオーバーラップを制御できるようになりました。

于 2012-09-10T18:31:19.860 に答える
0

2つのセクションにz-indexスタイルを追加して、必要なセクションが一番上に表示されるようにできますか？

于 2012-09-10T18:24:42.523 に答える
0

z-index相対divよりも大きい絶対位置のdivに設定する必要があります。

そんな感じ

<div style="position: relative; width:600px; z-index: 10;">
    <p>Content of unknown length</p>
    <div>Content of unknown height</div>
    <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; z-index: 20;"></div>
</div>

z-indexページの深さでレイヤーの位置を設定します。

または、フローティングを使用して、長さが不明なすべてのテキストを表示することもできます。しかし、この場合、あなたは絶対にあなたの位置を決めることができませんでしたdiv

<div style="position: relative; width:600px;">
  <div class="btn" style="float: right; width: 200px; height: 100px;"></div>
  <p>Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length</p>
  <div>Content of unknown height</div>
  <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>​
于 2012-09-10T18:26:23.473 に答える