0

次の CSS を検討してください。この状況では、他の CSS ルールが定義されていないか、有効になっていないことに注意してください。

* {
    position: absolute;
    color: red;
}

div {
    position: static;
    color: blue;
}

live hereである少しのテキストを含む div を追加すると、div内のテキストが画面全体を横断しなくなります。div の width プロパティが 10% に設定されているかのようです。ワイルドカードから position:absolute 宣言を削除すると、div は通常に戻ります (テキストが画面全体に表示されます)。すべての div が position:static 宣言で定義されているため、これは不可解です。有名な「reset.css」スタイルシートを含めて、または含めずにこれを試しましたが、同じ結果が得られました。

最初は、ワイルドカード ルールが CSS の div ルールよりも優先されるのではないかと考えました。それは十分に簡単だったでしょう。ただし、ワイルドカード ルールの color プロパティを赤に設定し、div ルールの color プロパティを青に設定すると、テキストが青く表示されます。したがって、ワイルドカード ルールが div ルールよりも優先されるという単純な答えはありません。

関連すると思われることの1つは、絶対配置された要素は、最初に配置された（静的ではない）祖先要素に対して相対的に配置されることです。この場合、本体にはそのような祖先がないため、本体が絶対配置に設定されているが、配置された祖先要素がないために発生した、何らかのサイレント エラーである可能性があります。

この奇妙な行動の原因を知っている人はいますか?

4

2 に答える 2

2

はの親にposition: absolute適用されます。 コンテンツに合わせてシュリンクラップします。<div>
<div>

のレイアウト領域はページ幅全体をカバーしなくなったため、<div>引き伸ばされません。

width: 100%マージンとパディングを追加して削除することで、これを修正できます。

于 2013-04-26T01:38:02.783 に答える
1

メークhtmlおよび/またはbodyポジションstatic:

デモありhtml { position: static; }
デモありbody { position: static; }

または、セレクターを次のように変更しますbody *。

body * {
    position: absolute;
    color: red;
}
div {
    position: static;
    color: blue;
}
于 2013-04-26T01:42:11.517 に答える