position的用法

Posted daydayupyxq

tags:

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

Position定义: position 属性规定元素的定位类型。 
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。技术分享图片

在介绍postion值之前先给大家介绍一下 z-index的使用,它可被用于将在一个元素放置于另一元素之后,决定了一个html元素层叠级别。元素层叠级别是相对于元素在Z轴上(X轴与Y轴的平面相垂直相的平面)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部(值越大越在上层,可以允许有负数值)。


absolute(绝对定位): 脱离了文本流(即在文档中已经不占据位置),absolute在没有设定TRBL值时是根据父级对象(此对象定位必须为脱离文档流的定位,否则就以body为其父元素)的坐标作为始点的(图1),当设定TRBL值后则根据浏览器的左上角作为原始点(图2)。

技术分享图片


relative(相对定位):相对于元素本身在文档中应该出现的位置来移动这个元素,可以通过TRBL来移动元素的位置,实际上该元素依然占据文档中原有的位置,只是视觉上相对原来的位置有移动。 
技术分享图片


fixed(固定定位): 元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

<style>
    #child{
        width: 200px;
        height: 200px;
        background: #0099FF;
        position: fixed;
        left: 200px;
        top: 200px;
    }
    #parent{
        width: 400px;
        height: 2200px;
        background: red;
        margin-top: 200px;
        margin-left: 200px;
        position: absolute;
    }
</style>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>         
</body>

过程一 

技术分享图片
过程二 
技术分享图片
从上面的两个过程中可以看出fixed是相对于浏览器的窗口进行定位。

inherit(继承定位):规定应该从父元素继承 position 属性的值。

#child{
    width: 200px;
        height: 200px;
        background: #0099FF;
        position: inherit;
        left: 100px;
        top: 100px;
    }
    #parent{
        width: 400px;
        height: 2200px;
        background: red;
        margin-top: 200px;
        margin-left: 200px;
        position: absolute;
    }
<body>
    <div id="parent">
        <div id="child"></div>
    </div>         
</body>

 

技术分享图片
从父元素那儿继承了absolute属性,使得child相对于父元素left: 100px; 
top: 100px;


initial(还原定位): initial的作用是把属性设置回默认值。

static(静态定位):如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他值。








以上是关于position的用法的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

CSS代码片段

css常用代码片段 (更新中)

SQL Select 语句的用法

很实用的JQuery代码片段(转)

position:sticky用法