ホームページ > 記事 > ウェブフロントエンド > CSSの3つの配置方法とは
CSSの3つの配置方法とは
- 青灯夜游オリジナル
- 2021-11-02 12:00:5812615ブラウズ
CSS の 3 つの配置方法は次のとおりです: 1. 相対配置、要素の位置は元の位置を基準にして計算されます、構文 "position:relative;"; 2. 固定配置、構文 "position :fixed ;"; 3. 絶対位置指定、構文「position:absolute;」。
このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。