html5 位置決めには 5 種類があります: 1. 絶対位置決め (absolute)、2. 相対位置決め (relative)、3. 固定位置決め (fixed)、4. スティッキー位置決め (sticky)、5. 静的位置決め(静的))。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
html5 のいくつかの位置決めメソッド
position は、親ブロックを基準としたブロック レベルの要素の位置、およびそれ自体を基準としたブロック レベルの要素の位置を設定します。絶対配置(absolute)
機能:
親要素がない場合、参照オブジェクトはドキュメント全体です。- デフォルトでは、参照オブジェクトは位置決めされた親要素です。
- 絶対位置決めされた要素を追加すると、ドキュメント全体が分離されます。レイアウト スペース
- 絶対的に配置された要素はドキュメント フローからドラッグされ、left などの属性を使用した最も近い位置設定を持つ最も近い親要素に対して相対的に配置されます。 、右、上、下など。絶対配置の場合、要素の親が配置属性を設定していない場合は、body要素の左上隅を基準に配置されます。絶対的に配置された要素は積み重ねることができ、積み重ね順序は z-index 属性によって制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値をとることもできます。
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body> class="two" の div を の上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトが変更され、この要素の元の位置に空白スペースは残りません。
#2. 相対位置決め (相対とは幽体離脱のシーンに相当します)
特徴:
参照オブジェクトは独自のデフォルト位置です- スペースを占有します
- 参照オブジェクトは破棄されませんレイアウト フロー
-
#相対的に配置された要素は積み重ねることができず、左、右、上、下などの属性に基づいて通常のドキュメント フロー内でオフセットできます。 z-index 階層設計を使用することもできます。
<head> <style type="text/css"> .box { background: red; width: 100px; height: 100px; float: left; margin: 5px; } .two { position: relative; top: 50px; left: 50px; } </style> </head> <body> <div class="box" >One</div> <div class="box two" >Two</div> <div class="box" >Three</div> <div class="box">Four</div> </body> class="two" の div を元の位置の上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトは変更されませんが、この要素の元の位置に空白スペースが残ります。
3. 固定配置 (固定)
機能:
参照オブジェクトブラウザ ウィンドウの固定位置
固定位置は絶対位置と似ていますが、ブラウザ ウィンドウに対して相対的に配置され、スクロール バーと一緒にスクロールしません。
固定位置の最も一般的な使用法の 1 つは、マージン、境界線、またはパディングを使用せずに、ページ上に固定ヘッダー、固定フット、または固定サイドバーを作成することです。
要素をブラウザ ウィンドウの上下左右の中央に配置する方法:
方法 1:
position:fixed left:50%; top:50%; margin-left: -盒子宽度的一半 margin-top:-盒子高度的一半方法 2:
position:fixed; left:0; right:0 top:0 bottom:0 margin:auto
4. Sticky の配置 (sticky には互換性の問題があります)
機能:
これは、相対と固定
- ## ページがスクロール バーをトリガーしない場合、実行効果は位置: 相対的です。それ以外の場合、実行効果は位置: 固定 です。 # アプリケーションは次のとおりです: ページ天井
-
<!DOCTYPE html> <html> <meta charset="utf8"> <head> <style> section:first-child { height: 200px; background-color: lightgray; } section:nth-child(2) { height: 100px; background-color: orange; position: sticky; position: -webkit-sticky; top: 50px; } section:nth-child(3) { height: 300px; background-color: lightgray; } section:nth-child(4) { height: 100px; background-color: orange; position: sticky; position: -webkit-sticky; top: 150px; } section:last-child { height: 500px; background-color: darkgray; } </style> </head> <body> <section>SECTION-1</section> <section>SECTION-2</section> <section>SECTION-3</section> <section>SECTION-4</section> <section>SECTION-5</section> </body> </html> - 5. 静的配置 (静的デフォルト)
一般に、現在の要素の配置方法が静的であることを指定する必要はありません。これがデフォルトの配置方法であるためです。親要素から継承した位置決めシステムをオーバーライドする場合を除きます。 left 属性と top 属性は、マージンによって配置される静的属性には影響しません。
関連する推奨事項:「
html ビデオ チュートリアル」
以上がHTML5 のポジショニングにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PMhtml5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。
html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PMhtml5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。
html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。
html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PMhtml5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
Html5怎么取消td边框May 18, 2022 pm 06:57 PM3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。
html5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM因为html5不基于SGML（标准通用置标语言），不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，也即按照正常的方式来运行，因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明，用于告诉浏览器编写页面所用的标记的版本。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7433
15135952