CSS での Position:relative の役割を共有します。-CSSチュートリアル-php.cn

CSS での Position:relative の役割を共有します。

黄舟

リリース： 2017-07-19 14:39:23

オリジナル

2255 人が閲覧しました

CSS の Position:relative; の意味とその意味がまだわかりません。

位置の他のすべての属性を理解しています

Quote

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

ドキュメントで言及されているいくつかの属性については、相対を除き、他の属性を試した後に効果が表示されます。相対を理解するのは非常に困難です。。

相対的な位置関係ではありません。

ページ上の静的な div#demo の場合、この #demo の div#sub を #demo を基準にして右上隅のどこかに配置したいのですが、このposition:relativeを使用して、「Go to top」を追加する必要があります。そしてそれを制限する権利。
正しく理解できていますか?

しかし、実際の開発では期待した結果が得られないことがよくあります。それは私がまだこの性質を十分に理解していないからだと思います。今度はこれを完全にマスターして、position:absolute のようにマスターして、HTML 要素でやりたいことを何でもしたいと思います。
これを理解している友人を教えてください、またはいくつかの情報、リンクなどを提供してください。

ありがとうございます。
質問への補足:
リンクを提供していただきありがとうございますが、position:relative について詳しく理解できることを願っています。
補足質問:
リーゼ、あなたは良い指摘をしました。
しかし、この属性を宣言する要素自体の位置はどうなるでしょうか?それ自体の上下左右の機能は何ですか?
あなたが話しているのは、相対的な子要素の動作です。それ自体について何か知りたいです。
補足質問:
基本的な説明をしていませんか？

「ページ上の静的な div#demo の場合、この #demo の div#sub を #demo を基準にして右上隅のどこかに配置したいと思います。このposition:relativeを使用し、次にtopとを追加する必要があります。
それを正しく理解していますか? "

まず最初に、あなたの疑問に答えましょう:
position のデフォルト値は静的です (つまり、position 属性が定義されていない場合、その位置: static)

この #demo の div #sub を #demo を基準にして右上隅のどこかに配置したい場合は、#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;  
    }  
  
    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>

ログイン後にコピー

以上がCSS での Position:relative の役割を共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。