6

今日、CSS ポジショニング モードについて考えていた のですが、子要素position:relativeを操作する以外には決して使用しないことに気付きました。position:absolute

私は「デザイナー」というより「開発者」ですが、長年にわたってかなりの数の CSS ベースのレイアウトを作成してきました。テーブル、フロート、マージン (正と負)、position:absolute、さらには position:fixed を使用しましたが、position:relative を実際に配置するために使用したことはないと思います。エレメント。

position:relative に依存する (そして実際のデザインで使用される) 優れた CSS の達人テクニックはありますか? 私は見逃していますか？

4

5 に答える 5

6

私はposotion: relative過去にコンテナ要素に使用したことがあり、その中に絶対配置された要素があります (中央に配置された 3 列のレイアウトのように)。例えば：

代替テキスト

コンテナにオフセットは与えませんが、 で配置するとposition: relative、コンテナに対して列を絶対に配置できます。コンテナがposition: staticデフォルトのように に設定されている場合、列はコンテナではなくブラウザのビューポートに対して絶対的に配置されます。

于 2010-02-23T01:22:46.493 に答える
6

余白や他の要素への影響を気にせずに要素をオフセットしたい場合に便利です。コンテナの側面から画像を意図的に突き出し、その横のコンテナ内の一部のコンテンツと (ほぼ) オーバーラップさせたいとします。

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

コンテナaは の通常のテキスト フローの一部であり、Xそれを維持したい場合は、きちんとした効果として横から少し突き出したいだけです。マージンを使用してこれを行うと、非常に面倒になり、他のコンテンツの一部がリフローする可能性があります。
使用position: relative; left: 10px;することで、副作用なく簡単にその効果を得ることができます。

于 2010-02-23T01:33:08.313 に答える
2

私はposition:relative;、上付き文字を上に上げることはできるvertical-align: top;が、段落の先頭を乱すことはできないように使用しています。

sup { 
    font-size: .7em;
    vertical-align: top;
    position: relative;
    top: -.1em;
}
于 2010-02-23T01:48:31.117 に答える
1

ヘッダー画像などを表示するために、次のようなものを複数回使用しました。

<div id="header">
  <div id="logo"></div>
<div>

CSS:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); }
#logo { position: relative; left: 40px; background: url(logo.jpg); }

この場合、ヘッダーには背景イメージとして全体に大きなストライプがあり、ロゴはストライプ内に少しオフセットされています。場合によっては、パディング/マージンよりも単純で、物事を少しシフトすると思いますが、それは単なる意見です。

于 2010-02-23T01:17:01.550 に答える
1

私は主に、親要素に対して絶対要素を配置したいときに使用します。その場合、親要素を に設定する必要がありますposition: relative。それがそのための場所です。

さらに、背景画像のあるブロック要素の IE6/7 haslayout/ちらつきのバグを修正するために、あちこちで使用しています。

于 2010-02-23T01:22:24.917 に答える