ホームページ >ウェブフロントエンド >jsチュートリアル >Position 属性_JavaScript スキルの相対的な使用法
Position 属性_JavaScript スキルの相対的な使用法
- WBOYオリジナル
- 2016-05-16 15:25:512032ブラウズ
Relative は位置の属性であり、相対的な位置決めです。
position のデフォルト値は static です (つまり、どの要素でも、position 属性が定義されていない場合は、position:static になります)
この #demo の div #sub を #demo に対して相対的に右上隅のどこかに配置したい場合は、#demo を相対的に配置し、#sub を絶対的に配置する必要があります。
Absolute は、最も近い親要素を基準にして配置されます。#demo を相対的に配置しない場合、#sub の絶対配置は body を基準にして配置されます。
relative は、それ自体に対して相対的に配置されます (例: #demo{position:relative;top:-50px;})。この場合、#demo は元の位置に対して 50px 移動します。
もう 1 つは、相対的なものは文書の流れから切り離されるものではなく、絶対的なものは文書の流れから切り離されるものです。つまり、相対要素は元の位置からずれているように見えますが、実際にはドキュメント フロー内では変更されていません。絶対要素はその位置を変更するだけでなく、文書の流れから切り離されます。
毎日使用する場合、position:relative は通常、position:absolute; の親レイヤーに設定されます。親レイヤーにposition:relative; があり、子レイヤーにposition:absolute; がある場合、境界に従って配置されます。それ以外の場合、position:Absolute は、body 要素に至るまで、position:relative で設定された要素の境界をレイヤーごとに検索します...
次のように例を書きました:
HTML コード
static: デフォルト値。特別な配置はありません。オブジェクトは HTML の配置ルールに従います
absolute: オブジェクトをドキュメント フローの外にドラッグし、左、右、上、下、およびその他の属性を使用して、最も多くの位置設定を備えた最も近い親オブジェクトを基準とした絶対位置を実行します。
そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性
を通じて定義されます。
修正: サポートされていません。オブジェクトの位置決めは絶対方式に従います。ただし、従うべきルールがいくつかあります
相対: オブジェクトは積み重ねることはできませんが、左、右、上、下などの属性に従って通常のドキュメント フロー内でオフセットされます
" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
<!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;
}
div#demo{
position:relative;
border:1px solid #000;
margin:50px;
top:-50px;
line-height:18px;
overflow:hidden;
clear:both;
height:1%;
}
div#sub{
position:absolute;
right:10px;
top:10px;
}
div.relative{
position:relative;
left:400px;
top:-20px;
}
div.static,div.fixed,div.absolute,div.relative{
width:300px;
}
div.static{
background-color:#bbb;
position:static;
}
div.fixed{
background-color:#ffc0cb;
}
div.absolute{
background-color:#b0c4de;
}
div.relative{
background-color:#ffe4e1;
}
-->
</style>
</head>
<body>
<div id="demo">
<div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
<div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
<div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
<div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
</div>
</body>
</html>
上記は、エディターが共有する位置属性の相対的な使用法全体の説明です。気に入っていただければ幸いです。