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

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

WBOY

リリース： 2022-08-02 18:18:03

オリジナル

6007 人が閲覧しました

この記事では、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プロパティ