css 定位-蒲公英云

css 定位

static:
    static默认值,没有定位,元素出现在正常的流中；    
relative:
    相对原位置移动,其他标签元素位置不改变,保留原本空间位置,不脱离文档流,但移动同样会覆盖到其他元素上,可通过z-index进行设置
        position:relative;
            可以使用top、right、bottom、left设置
                left:20px;
                top:30px;
absolute:
    不保留空间位置,脱离了文档流
    相对于最近的上级已定位的元素,如:relative、absolute和fixed;不能是static,若都无则相对于body定位
    绝对定位元素隐藏:
        想隐藏在哪个祖先里,该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值    
fixed:
    固定到屏幕位置，不随页面滑动而改变
        position:fixed;
        使用top、right、bottom、left设置
        #div04{
            position:fixed;
        }
sticky:
    当在父容器滑动,元素距离父元素边界为设置的距离时,会自动附着上去,同级元素会叠加,不同级会顶走
    使用条件:
        1、父元素不能overflow:hidden或者overflow:auto属性。
        2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
        3、父元素的高度不能低于sticky元素的高度
        4、sticky元素仅在其父元素内生效 
    position:sticky;
        使用top、right、bottom、left设置
float:浮动定位
    浮动不占据空间
    float:left/right    
    清除浮动:
        因为浮动不占据空间，所以浮动后，包含其的div高度变为0，可能有其他元素
        占据其位置，所以要清除浮动，即浮动后样式不改变，还原其空间
        法一：clear:both     可在包含浮动的一个div里再添加一个空的div，设置其样式为clear：both
        法二：通过伪类对象
            包含浮动元素的对象::after{
                display:block;
                clear:both;
            }
z-index
    显示层级优先级别
        必须对都是定位的元素才能使用

代码示例：

<html>
    <head>
        <title>css 定位</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> #div01{ 
                border:solid 2px red;
                height:200px;
                width:800px;
                margin-bottom:10px;
                margin-top:50px;
                position:relative;
            }
            #div02{ 
                border:dashed 2px blueviolet;
                height:200px;
                width:800px;
                margin-bottom:10px;
                position:relative;   /*使用相对定位和其他div已不在一个层级上*/
                left:50px;
                top:50px;
                background-color:blueviolet;
            }
            #div03{ 
                border:solid 2px cyan;
                height:200px;
                width:800px;
                background-color:cyan;
                position:relative;
                z-index:1;  /*设置层级显示优先级别*/
            }
            #div04{ 
                border: solid 3px blue;
                height:50px;
                width:50px;
                position:fixed;  /*使用固定定位*/
                top:295px;
                right:10px;
            }
            #showdiv{ 
                border: solid 3px;
                height:50px;
                width:50px;
                position:absolute; /*使用绝对定位*/
                top:10px;
            }
        </style>
    </head>
    <h3 align="center">css 定位</h3>
    <hr size="30" color="aquamarine"/>
    <body>
        <div id="div01">
            <div id="showdiv">
            </div>
        </div>
        <div id="div02">
            div02
        </div>
        <div id="div03">
        </div>
        <div id="div04">
        </div>
    </body>
</html>