温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中position:absolute的示例分析

发布时间:2021-09-14 11:54:21 来源:亿速云 阅读:212 作者:小新 栏目:web开发

这篇文章给大家分享的是有关CSS中position:absolute的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、绝对定位的特征

绝对定位有着与浮动一样的特性,即包裹性和破坏性。

就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度;而绝对定位的元素高度和宽度都没有了。

请看下面代码:

<!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>  
        <div class="box1">  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />  
            <p>这是普通流中的两幅图像。</p>  
        </div>  
        <div class="box2">  
            <img class="absolute" src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />  
  
            <div class="wraper">  
                <img class="float" src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />  
                <img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />  
            </div>  
            <p>左图,将第一幅图像绝对定位,其完全脱离文档流,并且覆盖在第二幅图像之上;由此看出,绝对定位的破坏性不仅让元素没有了高度,甚至没有了宽度。</p>  
            <p>右图,将第一幅图像左浮动,其虽然脱离了文档流,但是并没有覆盖在其他元素之上;浮动的破坏性仅仅破坏了元素的高度,而保留了元素的宽度。</p>  
        </div>  
        <div class="box3">  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />  
            <p>将容器绝对定位,体现其包裹性。</p>  
        </div>  
    </body>  
</html>

二、绝对定位的一般规则:

元素绝对定位时,会完全脱离文档流,并相对于其包含块定位。

绝对定位的包含块,是其最近的已定位的祖先元素。

如果这个祖先元素是块级元素,包含块则为该祖先元素的内边距边界,即边框。

如果这个祖先元素是行内元素,包含块则为该祖先元素的内容边界,即内容区。

如果没有已定位的祖先元素,元素的包含块定义为初始包含块。

偏移属性:top、right、bottom、left。

如果绝对定位的元素没有设置偏移属性,虽然脱离文档流,但是它的位置是原地不动的。

偏移属性可以为负值,将元素定位到包含块之外。

代码在这里:

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

三、用margin调整绝对定位元素的位置

绝对定位的元素,除了可以使用top、right、bottom、left进行偏移之外,还能够通过margin值进行精确定位,而且自适应性更好。

示例:

<!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>  
        <div class="box1">  
            <span>卡哇伊</span>  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />  
            <span>萌萌哒</span>  
        </div>  
        <div class="box2">  
            <span>卡哇伊</span>  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />  
            <span>萌萌哒</span>  
            </div>       
        <div class="box3">  
            <span>卡哇伊</span>  
            <img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />  
            <span class="meng">萌萌哒</span>  
        </div>       
        <div class="box4">  
            <ol>  
                <li>第一幅图,最开始的样子。</li>  
                <li>第二幅图,两个标签绝对定位,但是不指定任何偏移量。</li>  
                <li>第三幅图,用margin负值调整“萌萌哒”的位置,完成。</li>  
            </ol>  
        </div>           
    </body>  
</html>

放弃偏移属性而改用margin来调整绝对定位元素,其原理在于:

绝对定位的元素,在不设置偏移量的时候,它虽然完全脱离了文档流,但它还在原来的位置。

利用偏移属性进行精确定位,其具体位置是取决于绝对定位元素的包含块,不同的包含块将会有完全不一样的定位结果。

而利用margin进行精确定位,不依赖于任何其他东西,更加可控。 

四、绝对定位与整体布局

如何用绝对定位来对页面进行整体布局?

<!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>h2 {   
                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>h2 {   
                text-align: center;   
                line-height: 50px;   
            }   
  
            .content {   
                position: absolute;   
                top: 50px;   
                right: 0;   
                bottom: 50px;   
                left: 100px;   
                background-color: cyan;   
                overflow: auto;   
            }   
  
            .content h2 {   
                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>  
        <div class="page">  
            <div class="header">  
                <h2>Header</h2>  
            </div>  
            <div class="aside">  
                <h2>Aside</h2>  
            </div>  
            <div class="content">  
                <h2>实现原理</h2>  
                <ol>  
                    <li>创建一个div.page,绝对定位,铺满全屏。</li>  
                    <li>创建一个div.header,绝对定位,设定高度。</li>  
                    <li>创建一个div.aside,绝对定位,设定宽度。</li>  
                    <li>创建一个div.footer,绝对定位,设定高度。</li>  
                    <li>创建一个div.content,绝对定位,根据周围div的宽高设定它的宽高;<br />  
                    以div.content元素取代原body元素,所有的页面内容都放在这里面。</li>  
                </ol>  
            </div>  
            <div class="footer">  
                <h2>Footer</h2>  
            </div>  
        </div>  
    </body>  
</html>

感谢各位的阅读!关于“CSS中position:absolute的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI