CSS の配置
CSS 位置
CSS 位置プロパティを使用すると、レイアウトの一部を別の部分と重ねたり、長年にわたって通常は複数のテーブルを使用する必要があったタスクを実行したりすることができます。例:
前面に表示される要素を決定してください!
要素は重複する可能性があります!
配置
CSS の配置プロパティを使用すると、要素を配置できます。また、ある要素を別の要素の後ろに配置し、ある要素のコンテンツが大きすぎる場合に何が起こるかを指定することもできます。
要素は、top、bottom、left、right 属性を使用して配置できます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り機能しません。位置決め方法に応じて、動作方法も異なります
4 つの異なる位置決め方法があります。
静的配置
HTML 要素のデフォルト値。つまり、配置せずに要素は通常のフローに表示されます。
静的に配置された要素は、上下左右の影響を受けません。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>インスタンスを実行しますか?
オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください
固定位置
要素の位置は、ブラウザウィンドウに対して固定された位置です。
ウィンドウがスクロールされても動きません:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7和IE8支持只有一个!DOCTYPE指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>インスタンスを実行»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
注: ターゲットを固定IE7 および IE8 以下の DOCTYPE をサポートする必要があります。
要素の位置がドキュメント フローに依存しないため、スペースを占有しません。
固定位置の要素は他の要素と重なります。
相対配置
相対的に配置された要素は、通常の位置を基準にして配置されます。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>例の実行»
オンライン例を表示するには、「例の実行」ボタンをクリックしてください
相対的に配置された要素や重複する要素のコンテンツを移動することができ、その要素が元々占有していたスペースは移動されます。変わらない。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
相対的に配置された要素は、絶対的に配置された要素のコンテナ ブロックとしてよく使用されます。
絶対配置
絶対配置された要素の位置は、最も近くに配置された親要素を基準としたものになります。要素に配置された親要素がない場合、その位置は <html>:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
絶対配置では、要素の位置がドキュメントフローから独立するため、スペースを占有しません。
絶対的に配置された要素は他の要素と重複します。
sticky Positioning
stickyは英語で文字通りスティッキーという意味なので、スティッキーポジショニングとも言えます。
position: ユーザーのスクロール位置に基づいて配置されます。
固定的に配置された要素は、ユーザーのスクロールに依存し、position:relative とposition:fixed の配置を切り替えます。
position:relative; のように動作し、ページがターゲット領域を超えてスクロールすると、position:fixed; のように動作し、ターゲット位置に固定されます。
要素の配置は、特定のしきい値を超える前は相対配置であり、それ以降は固定配置です。
この特定のしきい値は、上、右、下、または左の 1 つを指します。つまり、上、右、下、または左の 4 つのしきい値の 1 つを指定することによってのみ、スティッキー配置が有効になります。それ以外の場合、動作は相対位置決めと同じです。
注: Internet Explorer、Edge 15 およびそれ以前の IE バージョンは固定配置をサポートしていません。 Safari には -webkit- プレフィックスが必要です (以下の例を参照)。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>インスタンスを実行しますか?
オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください
重複する要素
要素はドキュメントフローとは独立して配置されるため、他の要素をオーバーレイできますページ上の要素
z-index 属性は、要素の重なり順 (どの要素を前または後ろに配置するか) を指定します
要素には、正または負の重なり順を指定できます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html> サンプルの実行 »
オンラインサンプルを表示するには、[サンプルの実行] ボタンをクリックしてください
積み重ね順序が高い要素は、常に積み重ね順序が低い要素の前にあります。
注: 配置された 2 つの要素が重なっていて、z-index が指定されていない場合、HTML コード内で最後に配置された要素が一番上に表示されます。
その他の例
例: 要素の形状のクリッピング
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>例の実行 »
オンライン例を表示するには、[例の実行] ボタンをクリックしてください
この例は、要素の形状を設定する方法を示しています。要素がこの形状にクリップされて表示されます。
例: スクロール バーを使用して要素内のオーバーフロー コンテンツを表示する方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>例の実行»
オンラインの例を表示するには、[例の実行] ボタンをクリックしてください
この例では、オーバーフロー属性を示しますスクロール バーを作成する、要素のコンテンツが指定された領域に大きすぎる場合に収まるように設定する方法。
例: ブラウザの自動オーバーフロー処理の設定方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
例: カーソルを変更します
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>将鼠标移动到这些字上改变鼠标样式cursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
この例は、オーバーフローを自動的に処理するようにブラウザを設定する方法を示しています。
すべての CSS 配置プロパティ
「CSS」列の数字は、プロパティを定義する CSS (CSS1 または CSS2) バージョンを示します。
| 属性 | 説明 | 値 | CSS |
|---|---|---|---|
| 下 | 配置された要素の下マージン境界と下境界の間の距離を定義します含まれるブロックのオフセット。 | 自動長さ % inherit | 2 |
| clip | 絶対位置の要素をクリップ | shapeauto 継承 | 2 |
| cursor | 指定した型へのカーソル移動を表示 | url auto クロスヘア デフォルト ポインター move e-resize ne-resize nw-resize n-resize se-resize SW-サイズ変更 s-resize w-resize テキスト 待つ ヘルプ | 2 |
| left | は、位置決めされた要素の左マージンエッジとその要素を含むブロックの左エッジの間のオフセットを定義します。 | 自動 長さ % inherit | 2 |
| overflow | 要素のコンテンツがその領域をオーバーフローした場合に何が起こるかを設定します。 | 自動 非表示 スクロール 表示 inherit | 2 |
| overflow-y | 要素のコンテンツ領域の上端/下端を越えるコンテンツの処理方法を指定します | 自動 非表示 スクロール visible no-display no-content | 2 |
| overflow-x | のコンテンツ領域の右端/左端のコンテンツを処理する方法を指定します。オーバーフロー要素 | 自動 非表示 スクロール 表示 非表示 コンテンツなし | 2 |
| position | 要素の配置タイプを指定します | 絶対 固定 相対 静的 継承 | 2 |
| right | は、位置決めされた要素の右マージンエッジと、それを含むブロックの右エッジの間のオフセットを定義します。 | 自動 長さ % 継承 | 2 |
| top | は、位置決めされた要素の上マージン境界とその要素を含むブロックの上境界の間のオフセットを定義します。 | 自動 長さ % inherit | 2 |
| z-index | 要素の重なり順を設定 | number auto 継承 | 2 |
