绝对定位——absolution

Posted goodgirl----xiaomei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了绝对定位——absolution相关的知识,希望对你有一定的参考价值。

 <!--绝对定位:
            当position的属性值设置为absolution时,则开启了元素的绝对定位
      absolution的特性:
           1.开启了绝对定位,会使元素脱离文档
          2.但是开启绝对定位,如果不设置偏移量,则元素的位置不会发生变化
          3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位
                 如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
          4.绝对定位会使一个元素提升一个层级
          5.绝对定位会改变元素的性质
                         (1) 内联元素会变成块元素
                           (2)块元素的宽度和高度默认都会被内容撑开
          -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>postion</title>
        <style>
            .box1{
                width: 200px;
                height: 200px;
                background: red;                
            }
            .box2{
                width: 200px;
                height: 200px;
                background: yellow;
                position:absolute;
                left:200px;
                top:0px;    
            }
            .box3{
                width: 400px;
                height: 400px;
                background: green;
                position: relative;
                /*开启box4的相对定位*/                
            }
            .box4{
                width: 300px;
                height: 300px;
                background: papayawhip;    
            }
            .sp{
                width: 200px;
                height: 200px;
                background: cyan;
                position: absolute;
            }
        </style>
    </head>
    <body>
      
        <div class="box1"></div>
        <div class="box3"><div class="box4"><div class="box2"></div></div></div>
        
        <span class="sp">这是一个span</span>
    </body>
</html>




























































以上是关于绝对定位——absolution的主要内容,如果未能解决你的问题,请参考以下文章

案例3,Absolute:绝对定位

absolute绝对定位的非绝对定位用法

绝对定位( Absolute positioning )

绝对定位——absolution

position absolute 绝对定位 设置问题

Absolute(绝对定位)与relative(相对定位)的图文讲解