0

これを操作するposition:fixed;と、期待される結果が得られます。

ここに画像の説明を入力

私が実際に達成したいのは：

ここに画像の説明を入力

この結果のようposition: relative;に、2 つの要素を操作する場合

ここに画像の説明を入力

誤解しないでください、私はどのように機能するかposition: fixed、またはposition: absolute動作する必要があるかを知っていますが、同じdivの両方のプロパティを取得する方法を理解していません...

機能するアプローチの 1 つですが、満足のいく解決策ではありませんposition: relative。固定要素の下に -div を配置し、追加の div によって既に使用されているため、2 番目の要素が固定要素の下に移動できないようにすることです。

ここに画像の説明を入力

そこで、この2 番目の相対 div:after を :before疑似要素で動作させようとしました。これはあまり機能していないようです

div:after, div:before { position: relative; }

要素自体が

div { position: fixed }

また、 - 要素にバインドされるため、回転fixedもrelative明らかに機能しません。fixedrelative

何か案は？

そして、なぜ私が使用する必要があり、fixed単に使用しないのか疑問に思っている人がいれば、relativeそれはスクロールの理由です.

4

1 に答える 1

2

相対 div に残されたマージンを使用しないのはなぜですか?

http://jsfiddle.net/q3nQr/1/

html

<div id="fixed"></div>
<div id="relative"></div>

CSS

#fixed { position: fixed; width: 60px; height:100px; background: red;  }

#relative { position: relative; width: 300px;height:1000px; background: green; margin-left:65px; }

アップデート

静的配置については、w3 仕様を参照してください (最初の 2 つの段落を読んでください)。

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

絶対配置された要素は、ドキュメント フローから完全に削除されます。つまり、親要素や、ソース コードでそれらの後に出現する要素にはまったく影響しません。したがって、絶対配置要素は、それを防ぐための措置を講じない限り、他のコンテンツと重なってしまいます。もちろん、このオーバーラップがまさにあなたが望むものである場合もありますが、必要なレイアウトが確実に得られるように、このことを認識しておく必要があります。

固定配置は、実際には絶対配置の特殊な形式にすぎません。位置が固定されている要素は、含まれている要素ではなく、ビューポート/ブラウザー ウィンドウに対して固定されています。ページがスクロールされても、ブラウザ ウィンドウ内のまったく同じ位置にとどまります。

これは、固定位置または絶対位置を持つ要素がドキュメント内の他の要素と関連付けられないことを意味します。これは、別の要素の幅に影響を与えることができないことを意味します。静的要素の幅がわからない場合は、javascript で DOM を操作する必要があると思います。（jquery、テストされていません）のように簡単なもの：

var staticwidth = $("#static").width();
$("#relative").css('margin-left', staticwidth + 'px');
于 2013-03-15T21:19:15.977 に答える