[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
2021-12-31 18:32:04
CSSポジション
position属性は、要素の位置決めの種類を指定します。
position属性の5つの値。
- 静的
- 相対
- 固定
- 絶対
- 粘着性
要素はtop, bottom, left, right属性で位置決めすることができます。しかし、これらの属性は、position 属性が先に設定されていないと機能しません。また、位置決めの方法によって、それぞれ異なる方法で動作します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 1400px;
height: 1500px;
margin: 0 auto;
}
.box1{
border: 1px solid #000000;
height: 200px;
width: 200px;
display: inline-block;
position: fixed;
}
.box02{
border: 1px solid #006400;
height: 1500px;
width: 800px;
display: inline-block;
margin: 0 20px;
margin-left: 250px;
}
.box03{
border: 1px solid #006400;
height: 200px;
width: 200px;
display: inline-block;
position: fixed;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">123</div>
<div class="box02">456</div>
<div class="box03">789</div>
</div>
</body>
</html>
この記事は、CSS位置固定左右二重位置決めコードが導入され、より関連するCSS位置固定位置決めコンテンツは、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポートすることを願っています!.
関連
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル】 css border add four corners コード
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[CSSレイアウト例】6種類の適応的な2カラムレイアウトを実現するCSS
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[css3]CSS3アニメーションによる光のボタンの流れの効果
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル]css transform ページめくりアニメーションの記録
-
[css3】background属性の8つの属性値について解説(インタビュー記事)
-
[CSSチュートリアル]cssで背景画像の上にテキストを実現する
-
[CSSチュートリアル】2要素ブレンド効果(スティッキー効果)を実現するCSS)