ホームページ > 記事 > ウェブフロントエンド > CSS における Position:relative の役割の概要

CSS における Position:relative の役割の概要

不言オリジナル: 2018-07-02 09:32:553602ブラウズ

この記事では、CSS でのposition:relative; の役割を主に紹介します。必要な場合は、CSS の

position:relative を参照してください。はい、relative はドキュメントフローから切り離されませんが、absolute 要素は元の位置から外れているように見えますが、実際にはドキュメントフロー内では変更されません

Quote

static。 : 特別な配置はありません。オブジェクトは HTML の配置ルールに従います。
absolute: オブジェクトをドキュメントフローの外にドラッグし、絶対配置に left、right、top、bottom およびその他の属性を使用します。そして、そのカスケードは z-index 属性によって定義されます。この時点では、オブジェクトにはマージンはありませんが、パディングと境界線はまだあります。
relative: オブジェクトは積み重ねることはできませんが、左、右、上、下などの属性に基づいて通常のドキュメントフロー内でオフセットされます。など
修正: IE5.5 と NS6 はまだですこの属性はサポートされていません

「ページ内の静的な p#demo の場合、この #demo の p#sub を相対的に右上隅のどこかに配置したい#demo では、この位置を使用する必要があります: これを制限するには、top と right を追加します。
まず最初に、位置のデフォルト値を説明します。は静的です (つまり、要素の位置属性が定義されていない場合、その要素の位置は静的です)
この #demo の p#sub を # を基準にして右上隅のどこかに配置したい場合デモの場合は、 #demo 相対位置、 #sub 絶対位置を指定する必要があります。
Absolute は最も近い親要素を基準にして配置されます。#demo を相対的に配置しない場合、#sub の絶対配置は body を基準にして配置されます。
relative はそれ自体に対して相対的に配置されます (例: #demo{position:relative;top:-50px;})。その場合、#demo は元の位置に対して 50px 移動します。
もう 1 つは、相対的なものは文書の流れから切り離されるものではなく、絶対的なものは文書の流れから切り離されるものです。つまり、相対要素は元の位置からずれているように見えますが、実際にはドキュメントフロー内では変更されていません。絶対要素はその位置を変更するだけでなく、文書の流れから切り離されます。

私は次のように例を書きました:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>position</title> 
<style type="text/css"> 
<!-- 
body{ 
font-size:12px; 
margin:0 auto; 
} 
p#demo{ 
position:relative; 
border:1px solid #000; 
margin:50px; 
top:-50px; 
line-height:18px; 
overflow:hidden; 
clear:both; 
height:1%; 
} 
p#sub{ 
position:absolute; 
right:10px; 
top:10px; 
} 
p.relative{ 
position:relative; 
left:400px; 
top:-20px; 
} 
p.static,p.fixed,p.absolute,p.relative{ 
width:300px; 
} 
p.static{ 
background-color:#bbb; 
position:static; 
} 
p.fixed{ 
background-color:#ffc0cb; 
} 
p.absolute{ 
background-color:#b0c4de; 
} 
p.relative{ 
background-color:#ffe4e1; 
} 
--> 
</style> 
</head> 
<body> 
<p id="demo"> 
<p class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </p> 
<p id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </p> 
<p class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </p> 
<p class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </p> 
</p> 
</body> 
</html>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS における Position:relative の役割の概要

関連記事