ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSposition:absolute分析の包括的な理解

CSSposition:absolute分析の包括的な理解

高洛峰オリジナル: 2017-03-07 13:51:071294ブラウズ

1. 絶対位置決めの特徴

絶対位置決めは、フローティングと同じ、包み込み性と破壊性という特徴を持っています。

破壊性の点では、フローティングは要素の高さを破壊するだけで、要素の幅は保持されますが、絶対に配置された要素の高さと幅は失われます。

次のコードを見てください:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绝对定位的特征</title>
        <style>
            .box1,.box2,.box3 {   
                background-color: orange;   
                margin-bottom: 30px;   
            }   

            .absolute {   
                position: absolute;   
            }   

            .wraper {   
                display:inline-block;   
                margin-left: 300px;   
            }   

            .float {   
                float: left;   
            }   

            .box3 {   
                position: absolute;   
            }   
        </style>
    </head>
    <body>
        <p class="box1">
            <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
            <p>这是普通流中的两幅图像。</p>
        </p>
        <p class="box2">
            <img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />

            <p class="wraper">
                <img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
                <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
            </p>
            <p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p>
            <p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p>
        </p>
        <p class="box3">
            <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
            <p>将容器绝对定位，体现其包裹性。</p>
        </p>
    </body>
</html>

2. 絶対配置の一般規則:

要素が絶対配置される場合、要素は完全にドキュメントフローから外れ、その要素を含む要素に対して相対的に配置されます。ブロック。

絶対的に配置された包含ブロックは、最も近くに配置された祖先要素です。

祖先要素がブロックレベル要素の場合、それを含むブロックは祖先要素のパディング境界、つまり境界になります。

祖先要素がインライン要素の場合、それを含むブロックは祖先要素のコンテンツ境界、つまりコンテンツ領域になります。

位置指定された祖先要素がない場合、その要素の包含ブロックが最初の包含ブロックとして定義されます。

オフセット属性: 上、右、下、左。

絶対配置要素に offset 属性が設定されていない場合、ドキュメントフローから外れても、その位置はそのまま残ります。

要素を含むブロックの外側に配置するには、offset プロパティを負の値にすることができます。

コードはこちらです:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绝对定位的一般规则</title>
        <style>
            body {   
                background-color: #ccc;   
            }   
            .container {   
                width:500px;   
                background-color: orange;   
                margin:20px auto 50px auto;   
                padding:20px;   
                border:2px solid red;   
            }   

            .box2 img,.box3 img,   
            .box4 img,.box5 img {   
                position: absolute;   
            }   

            .box3 img,.box4 img {   
                left:0;   
                bottom:0;   
            }   

            .box5 img {   
                left: -30px;   
                bottom: -50px;   
            }   

            .block {   
                position :relative;   
                height: 200px;   
            }   
        </style>
    </head>
    <body>
        <p class="container">
            <p class="box1">
                <p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p>
                <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
                <ul>
                    <li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li>
                    <li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li>
                    <li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li>
                </ul>
            </p><!--关闭box1-->
        </p><!--关闭container-->
        <p class="container">
            <p class="box2">
            <p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p>
            <p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p>
            <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            </p><!--关闭box2-->
        </p><!--关闭container-->
        <p class="container">
            <p class="box3">
                <p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p>
                <p>当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p>
                <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            </p><!--关闭box3-->
        </p><!--关闭container-->
        <p class="container block">
            <p class="box4">
                <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
                <p>此处已经定位的祖先元素为这个图像的容器p元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。</p>
                <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            </p><!--关闭box4-->
        </p><!--关闭container-->
        <p class="container block">
            <p class="box5">
                <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
                <p>此处已经定位的祖先元素为这个图像的容器p元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。</p>
                <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
            </p><!--关闭box5-->
        </p><!--关闭container-->
    </body>
</html>

3. 絶対配置された要素の位置を調整するにはマージンを使用します

絶対配置された要素は、上、右、下、左だけでなく、Precise を使用してオフセットすることもできます。位置決めはマージン値によって行われ、適応性が向上します。

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用margin调整绝对定位元素的位置</title>
        <style>
            .box1,.box2,.box3 {   
                display: inline-block;   
                margin-right: 150px;   
                border:1px solid blue;   
            }   

            span {   
                background-color: red;   
            }   

            .box2 span,.box3 span {   
                position: absolute;   
            }   

            .meng {   
                margin-left: -3em;   
            }   

            .box4 {   
                border:1px solid red;   
                width: 500px;   
                margin: 50px auto 0 auto;   
                padding:20px;   
            }   

            li {   
                margin-bottom: 20px;   
            }   
        </style>
    </head>
    <body>
        <p class="box1">
            <span>卡哇伊</span>
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
            <span>萌萌哒</span>
        </p>
        <p class="box2">
            <span>卡哇伊</span>
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
            <span>萌萌哒</span>
            </p>
        <p class="box3">
            <span>卡哇伊</span>
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
            <span class="meng">萌萌哒</span>
        </p>
        <p class="box4">
            <ol>
                <li>第一幅图，最开始的样子。</li>
                <li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li>
                <li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li>
            </ol>
        </p>
    </body>
</html>

オフセット属性を放棄し、代わりにマージンを使用して絶対配置された要素を調整します。原則は次のとおりです。

オフセットが設定されていない場合、絶対配置された要素は完全にドキュメントフローから外れます。まだ元の場所にあります。

正確な位置決めには、オフセット属性を使用します。特定の位置は、絶対的に配置された要素の含まれるブロックに応じて異なります。

正確な位置決めにマージンを使用すると、他に依存せず、より制御しやすくなります。

4. 絶対配置と全体的なレイアウト

絶対配置を使用してページ全体をレイアウトするにはどうすればよいですか?

シンプルで大雑把、学ばないと無駄になります！！！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绝对定位与整体页面布局</title>
        <style>
            * {   
                margin: 0;   
            }/*重置所有margin为0，这一步极其重要，否则布局必乱。*/   

            html,body,.page {   
                width: 100%;   
                height: 100%;   
                overflow: hidden;   
            }   

            .page {   
                position: absolute;   
                top: 0;   
                right: 0;   
                bottom: 0;   
                left: 0;   
                background-color: #ccc;   
            }   

            .header {   
                position: absolute;   
                height: 50px;   
                left: 0;   
                right: 0;   
                background-color: purple;   
                padding: 0 5px;   
                z-index: 1;   
            }   

            .header>h1 {   
                line-height: 50px;   
                text-align: center;   
            }   

            .aside {   
                position: absolute;   
                top: 50px;   
                bottom: 50px;   
                left: 0;   
                width: 100px;   
                background-color: orange;   
            }   

            .footer {   
                position: absolute;   
                right: 0;   
                bottom: 0;   
                left: 0;   
                height: 50px;   
                background-color: purple;   
            }   

            .footer>h1 {   
                text-align: center;   
                line-height: 50px;   
            }   

            .content {   
                position: absolute;   
                top: 50px;   
                right: 0;   
                bottom: 50px;   
                left: 100px;   
                background-color: cyan;   
                overflow: auto;   
            }   

            .content h1 {   
                margin-top: 100px;   
                margin-left: 50px;   
            }   

            .content li {   
                margin-left: 100px;   
                margin-top: 80px;   
                font-size: 24px;   
                line-height: 1.5;   
            }   

            ol {   
                margin-bottom: 80px;   
            }   
        </style>
    </head>
    <body>
        <p class="page">
            <p class="header">
                <h1>Header</h1>
            </p>
            <p class="aside">
                <h1>Aside</h1>
            </p>
            <p class="content">
                <h1>实现原理</h1>
                <ol>
                    <li>创建一个p.page，绝对定位，铺满全屏。</li>
                    <li>创建一个p.header，绝对定位，设定高度。</li>
                    <li>创建一个p.aside，绝对定位，设定宽度。</li>
                    <li>创建一个p.footer，绝对定位，设定高度。</li>
                    <li>创建一个p.content，绝对定位，根据周围p的宽高设定它的宽高；<br />
                    以p.content元素取代原body元素，所有的页面内容都放在这里面。</li>
                </ol>
            </p>
            <p class="footer">
                <h1>Footer</h1>
            </p>
        </p>
    </body>
</html>

上記の CSS Position:absolute の包括的な理解は、編集者が共有したすべての内容です。参考にしていただければ幸いです。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSSposition:absolute の包括的な理解と分析関連記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSボックスモデル例の説明と分析次の記事：CSSボックスモデル例の説明と分析

続きを見る