CSSの3つの配置方法とは-CSSチュートリアル-php.cn

CSSの3つの配置方法とは

青灯夜游

リリース： 2021-11-02 12:00:58

オリジナル

12631 人が閲覧しました

CSS の 3 つの配置方法は次のとおりです: 1. 相対配置、要素の位置は元の位置を基準にして計算されます、構文 "position:relative;"; 2. 固定配置、構文 "position :fixed ;"; 3. 絶対位置指定、構文「position:absolute;」。

CSSの3つの配置方法とは

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

相対配置

要素の位置は、元の位置を基準にして計算されます。

position:relative;

ログイン後にコピー

デフォルトでは親の原点を原点として参照し、上、右、下、左で配置されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>相对定位</title>
<style type="text/css">
.king{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: skyblue;
width: 40%;
}
.king div{
width: 100px;
height: 60px;
margin: 10px;
background-color: snow;
color: black;
border: 1px solid black;
}
.three{
position: relative;
top: 20px;
left: 50px;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

ログイン後にコピー

固定位置

固定要素は、スクロールバーをドラッグしても位置が変わりません。

position:fixed;

ログイン後にコピー

デフォルトでは、固定位置要素の位置はブラウザを基準にしており、上、下、左、右の 4 つの属性と組み合わせて使用されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>固定定位</title>
<style type="text/css">
.first{
width: 50px;
height: 160px;
border: 1px solid gray;
background-color: #b7f1b7;
}
.second{
position: fixed;
top: 50px;
left: 160px;
width: 150px;
height: 100px;
border: 1px solid silver;
background-color:#b7f1b7;
}
</style>
<body>
<div class="first">div元素</div>
<div class="second">固定定位的div元素</div>
</body>
</html>

ログイン後にコピー

絶対配置

position:absolute;

ログイン後にコピー

デフォルトでは、絶対配置位置はブラウザを基準として、上、右、下、左になります。位置決め用に。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style type="text/css">
.king{
padding: 15px;
border: 1px solid silver;
background-color: skyblue;
width: 30%;
}
.king div{
padding: 10px;
}
.one{
background-color: chartreuse;
}
.two{
background-color: cyan;
position: absolute;
top: 20px;
right: 40px;
}
.three{
background-color: darkred;
}
.four{
background-color: dimgrey;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

ログイン後にコピー

z-index

z-index プロパティは、要素の積み重ね順序を設定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。

要素には、負の z-index 属性値を含めることができます。
Z-index は、位置指定された要素 (position:absolute; など) でのみ機能します。

属性値: auto: デフォルトでは、積み重ね順序は親要素と同じです。数値: 要素の重なり順を設定します。継承: z-index 属性の値を親要素から継承することを指定します。

例: 画像の Z インデックスを設定します:

img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

ログイン後にコピー

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

以上がCSSの3つの配置方法とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。