相対的な位置 - それは何ですか？ 詳細な説明

ネストHTML - 長いプロセス、厳格な、しかし非常に創造的。 ITで採用人々の大多数のため、Webページのレイアウトは、退屈な日常を思われるかもしれないという事実にもかかわらず、そのような場合のために使命を持っている専門家は、質的にタスクを実行するだけでなく、具体的な喜びのプロセスから受け取ります。

あなたが経験豊富なコーダーになる前に、しかし、それぞれの新人は、様々な指示やHTML言語の両方の仕様を勉強に多くの時間を費やし、そしてその同盟国に - CSS。 丁度について 何CSS、 相対位置- -それが何であるか、どのような「フェイント耳」あなたがアップ取得することができます、だけでなく、そのトップの特性の一つ、今日、私たちは話しましょう。

CSSとは何ですか？

CSSの略で、「カスケードスタイルシート」としてロシアに転写および翻訳することができます。 それはかなり奇妙に聞こえる - 一方では、それが明確なようで、言葉、および他の上 - 一般的な意味はすぐに捕獲されていません。 スタイルで - のは、シンプルで始めましょう。 この技術は、あなたが一度だけ登録して、無限の回数を使用することができ、外観に関するページ上のオブジェクト、特定の特性を添付することができます。

公式翻訳では「テーブル」は、事故ではほとんど登場語 - 実際には、より適切なここでは、単語「リスト」や「リスト」を使用することであろう、しかし、元の翻訳の著者は、CSSがリストより多くのように見えることを決めた、と私たちは誰ですかこのように、それらを試みることになりました。

最後に、単語「カスケード」。 実際には、各要素を混合あるいは重複することができるいくつかのスタイルを持つことができることです。 このような場合、ブラウザは、ルールのセットに頼る必要があり、そのうちの一つで、いくつかのスタイルであることが判明したブロックの外観を構成するために、例えば、位置相対性、およびその他を有する - 位置絶対。 実際には、このような競合は容認することはできませんが、大規模なプロジェクトでは、このような混乱はかなり頻繁に起こります。

すべては名前から明らかであるときそれでは、簡単な例を見てみましょう。 のは、あなたのサイトは、特定の方法で設計されたボタンの数が多い、あるべきとしましょう。 彼らは、このような大きさ、影、不透明度、色などの特性を有しています。 もちろん、あなたは各ボタンを作成し、これらのパラメータを指定しますが、CSSを使用する方がはるかに簡単であることができます。 実際には、上記の特性のすべての値を示します特定のクラスを記述する必要があり、その後、代わりに長いリストで、各ボタンのタグは、ブラウザ自体が所望の色で、これらの要素を色付けし、それらに適切なを与える、クラスの名前を指定する必要があります「光沢」。

Positionプロパティとは何でしょうか？

我々は今、この記事全体を開始されたのために、プロパティの位置に直接進みます。 あなたは英語に精通している、または良い勘を持っている場合は、すでに明らかである - このプロパティは、項目の場所を担当しています。 実際に、それは、代わりに特定の位置を決定する方法は、このプロパティは、1つまたは隣接又は全体としてページを横切るに対して別の要素を配置する方法をブラウザに指示します。

どのような値Positionプロパティができますか？

私たちの財産は、いくつかの異なる値を受け入れることができ、唯一の5つがあります。 ここではそれぞれの簡単な説明は次のとおりです。

• ポジション継承。 この機能を使用すると、親である要素の位置にデータをコピーすることができます。 あなたが指定した位置にdiv要素を持っている場合たとえば、その後も相対的に設定されますIMGの継承値と締結しました。
• 静的を配置します。 これ以上言及されない限り、この値は、自動的にすべての要素に与えられています。 要素はコードで述べたように所定の位置に収まると、その位置を変更することができ、「フリル」のさまざまな使用できません。
• 絶対位置。 この値によって、Positionプロパティは、かなり頻繁に、「浮動」要素を作成する必要がある場合に使用されます。 プロパティ項目の指定された値でページの他のコンポーネントのための「見えない」です。 それは彼らが私たちの絶対的な要素が存在しないかのように配置されています。 彼自身は関係なく、常にどこまでスクロールされたページの、場所になります。
• 固定位置。 絶対的な要素は、それに先行する要素の残りの部分を無視して、使用ブラウザ画面の左上隅の座標のみ固定され、親に結合されている間、多くの点で、この値は、しかしながら、前のものと同様です。
• 最後に、相対的な位置。 このタイプ値は、共通の「ゴム」で呼ばれるマーキング適応を作成するために有用であることができ、他の位置決め要素の相対ことを可能にします。 このプロパティを使用すると、アイテムはページ上の位置を変更する機能を失うことなく、他の「プッシュ」します。

別のブラウザでの位置での作業

いないすべてのブラウザで同じように互換性があります。 ポジションの価値を認知任意の結びせずにインターネットサーフィンのための最も代替プログラムは絶対に本当ですが、「慢性的に特別な»Internet Explorerはそのバージョンに応じて、プロパティを考慮しています。

「ロバ」彼らは単にそれを無視する - たとえば、すでに「埋葬」のブラウザIE6を使用して、あなたは値を修正し、継承を使用することはできません。 しかし、状況の第七版は改善し始め、そして最愛継承するために、すでに処理を修正しているという事実にもかかわらず、「他のブラウザをダウンロードするには、ブラウザを、」唯一の第8の化身に達しました。

オブザーバーの残りの部分は冷静に90年代半ばに発表されたその4つのバリエーションのプロパティのサポートを持っているオペラの例外、で、最初のバージョンで位置を扱います。

JavaScriptでの位置での作業

実際には、JavaScriptではPositionプロパティの使用方法の物語は、我々は唯一の良識のために含まれています。 div.style.position =「相対」：このプロパティは、タイトルに特殊文字を持っていないので、次のような行を含める必要があり、相対divの位置を設定するために、例えば、変更せずにJSを使用することができます。

あなたが見ることができるように、それはかなり簡単です。

なぜ優劣特別な注意を置き？

「スタイル位置：相対」の値を使用して、周囲の要素に穏やかにそれを置くために、「スパッツ」、プロパティ値の位置のほとんどは、一方で、不適切な使用は、画面の内容全体を強く「スキュー」可能性があるため、常に、全体として全ページについて覚えておく必要があります。

また、このプロパティは、そのアプリケーションが自動的にすべてのコンテンツページに影響しますので、あなたが簡単に、固定されたデザインの適応を変換することができます。 その後、我々はまだこの値を使用した例やエラーを検討する時間を持って、あなたは実際にはその具体的な意義が表示されます。

するときは、相対位置を使用する必要がありますか？

ページのHTMLの従来のレイアウトに加えて、位置関係は、多くの場合、面白い効果の様々なを作成するために使用されます。 あなたがアイテムをしたい場合たとえば、逆に、徐々にその領土を超えた、ページ上で「来た」または、それが正確であるこのプロパティは、この「トリック」を実装することができます。

あなたは、特定の変数の値の周期的な変化を調整することができCSS3のプロパティを通じて、プログレッシブ賦課を目指す場合にはJavascriptを介して実装されているこれらの「トリック」、である、または。

また、可能ないくつかのケースでは「ハイブリッド」の値の相対位置を作成します。 CSSは、していないが、同時に、あなたは位置のようなものを設定することができます：絶対相対しますが、いくつかのトリックを使用することによって、この効果を達成することは可能です。 このアプローチは、あなたが何かコンプレックス作成する必要がある場合に有用である可能性がツールチップやポップアップメニューを。 例を考えると、私たちは、このような構造の説明を与えるだろう「ハイブリッドを。」

相対的な順位を使用しての例

それは非常に単純ですが、あなたは興味深い効果の多様性を実現することを可能にする柔軟なツール - 相対的な位置。 無用コードテンプレートを書くために時間と場所を無駄にしないために、我々はあなたのサイトまたは特定のページを飾ることができ、いくつかの経口アルゴリズムを提示します。

「切れ」行で始まるのをしてみましょう。 あなたは「旅行」画面の左端ので、ゆっくりと右側に移動します要素の必要性があるとします。 位置設定する必要があり、このような「機構」を実装するには、次の相対。 左：-100px、-100 - ブロック幅を構成する画素の概数。 このスタイルは、「開始位置」に置く、あなたが画面の外にユニットを非表示にすることができます。 今、あなたは、それがブラウザウィンドウの幅マイナス要素の幅と等しくならないように、単位あたりのプロパティの値を左に数ミリ秒ごとに増加するスクリプトを使用することができます。 結果は画面上ロールと右手に「パーク」、左エッジの出てくる単位です。

別の例では、「相対絶対」の要素を作成することができます。 たとえば、位置を持つ、別の内部に絶対に入ることができます。 結果として、我々は絶対に内接された大きさを持っていない「相対的」ブロックを有していて、今前の要素から独立した位置に現れることができます。

典型的なミスの相対位置を使用して

相対位置を使用して最も一般的な間違いは、多くのWebデザイナーはどこにでも置くことができ単位で場所を確保する能力、忘れるということです。 あなたはかなり大きなを持っている場合たとえば、画面の外との相対位置を持つ置かれ、その場所にぽっかりと「穴」になります。 しかし、このプロパティは、時々、特定の不都合は、そのブロックの全てが徐々にトップ位置に配置されているサイトの「自己集合」の興味深い効果作成、例えば、良好に使用することができる作成された：0。 左：0; トン。すなわち、元の場所。