CSS の配置

CSS 配置

CSS 配置プロパティを使用すると、要素を配置できます。また、ある要素を別の要素の後ろに配置し、ある要素のコンテンツが大きすぎる場合に何が起こるかを指定することもできます。

要素は、top、bottom、left、right 属性を使用して配置できます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り機能しません。位置決め方法に応じて、動作方法も異なります

4 つの異なる位置決め方法があります。

静的配置

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>

プログラムを実行して試してください

相対位置決め

相対的に配置された要素は、通常の位置に対して相対的に配置されます。

例

 <!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>

相対的に配置された要素は、絶対的に配置された要素のコンテナブロックとしてよく使用されます。

絶対配置

絶対配置された要素の位置は、最も近くに配置された親要素を基準とします。要素に配置された親要素がない場合、その位置は次のようになります。

<!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>

プログラムを実行してください。試してみてください

絶対配置では、要素の位置がドキュメントフローから独立するため、スペースを占有しません。

絶対的に配置された要素は他の要素と重複します。

要素の重なり

要素はドキュメントフローとは独立して配置されるため、ページ上の他の要素と重なることができます

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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" 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>
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> 
</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>

走るそれを試してみるプログラム

学び続ける

新しいファイル

<!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="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="100" height="140" /> <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p> </body> </html>

提出するリセットコード

自動運転