CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 02, 2022 pm 06:18 PM

css

この記事では、css に関する関連知識を提供します。主に CSS 配置属性の相対配置に関連する問題を紹介します。相対配置とは、要素が移動することです。元の位置を基準として、要素フレームは次のように設定されます。相対位置が一定距離ずれるので見てみましょう。皆さんの参考になれば幸いです。

CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ

(学習ビデオ共有: css ビデオチュートリアル、html ビデオチュートリアル)

CSS 位置決め属性の詳細相対配置の説明相対属性

position:relative相対配置の詳細説明

相対配置とは、要素が移動するとき、元の位置を基準にして移動することを意味します。

相対位置決めの特徴:

元の位置に対して相対的に移動します(位置を移動する場合、基準点は元の位置になります)
標準ストリーム内の元の位置は引き続き占有され、後続のボックスは引き続きそれを標準ストリームとして扱います (標準から外れることなく、元の位置を保持し続けます)。したがって、相対位置決めは規格外ではなく、最も一般的な用途は絶対位置決めです。

相対配置に設定された要素ボックスは、一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。

CSS 相対位置決め

相対位置決めは、習得するのが非常に簡単な概念です。要素が相対的に配置されている場合は、その位置に表示されます。その後、垂直または水平位置を設定することで、要素をその原点に対して「相対的に」移動できます。

top が 20px に設定されている場合、ボックスは元の位置の上部から 20 ピクセル下になります。 left を 30 ピクセルに設定すると、要素の左側に 30 ピクセルのスペースが作成され、要素が右に移動します。

#box_relative {    position: relative;    left: 30px;    top: 20px;  }

以下に示すように:

CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ

相対配置を使用する場合、要素は移動されたかどうかに関係なく、元のスペースを占有することに注意してください。したがって、要素を移動すると、他のボックスが覆われてしまいます。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
    /* 设置相对定位 ,相对点是当前div的原始位置的左上角*/
    position: relative;
    /* 距离div的原始位置的左边框 */
    left:20px;
    /* 距离div的原始位置的上边框 */
    top:30px;
    /*
       right距离div的原始位置的右边框
       bottom距离div的原始位置的下边框
    */
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside">div1</div>
    <div class="inside1">div2</div>
</div>
</body>
</html>

出力結果:

CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ

ドキュメントに対する相対位置の影響フロー

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
    position:relative;
    left:30px;
    top:30px;
    /* div1相对定位脱离了文档流，
        但是后续的div还会认为div1是在没有相对定位之前的状态
        所有后续的div不会填补div1的空缺位置，而是继续按照文档流来排序    
    */
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside">div1</div>
    <div class="inside1">div2</div>
</div>
</body>
</html>

出力結果:

CSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティ

(学習ビデオ共有: cssビデオチュートリアル、 htmlビデオチュートリアル)

以上がCSSの位置決めプロパティの相対位置決めの詳しい説明relativeプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。