css position属性

原创 2016年05月30日 17:02:38

这是css2html属性,所有主流浏览器都支持。


一、Relative

相对于自身原来的位置进行定位,不脱离文档流,偏移出来的空间仍然被占据,其他文档元素不能占有由于偏移而空出来的空间。

 

Expmple

Css样式:

div{
    width:200px;
    height:200px;
}
#div2{
    background-colorred;
}
#div1{
    positionrelative;
    background-color:green;
    top:50px;
    left50px;
}

Html结构:

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

效果图:


绿色div块,相对于其本身偏移,偏移出来的空白空间不能被红色块所占据。

 

 

 

一、Absolute

相对于他的第一个position属性值不为static的父元素定位。(感觉有点绕口。。),就是他的父元素中第一个position属性值为relative或者absolute的那个父元素定位。定位之后脱离了文档流,原来空间可以被占据。

 

Example

Css代码:

#div1{
    border:1px solid black;
    height400px;
    width:400px;
    margin:auto;
    background-colorred;
    positionrelative;
}
#div2{
    height300px;
    width:300px;
    margin:50px auto;
    background-color:green;
}
#div3{
    positionabsolute;
    left:100px;
    height200px;
    width:200px;
    background-coloryellow;
}

 

 

Html结构:

<body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
</body>

 

效果图:


可见黄色绝对定位,向左偏移100px,他的父元素有div1div2,而他的最外层父元素div1relative定位属性,所以相对div1即红色块向左偏移了100px

再向绿色块加入一个div块,检验是否会占据黄色偏移空出来的空间。

#div4{
    width:100px;
    height:100px;

    Float:left;
    background-colorblack;
}

 

效果图:

可见黑色框占据了黄色框偏移出来的空间。

 

 

一、Fixed

固定定位,相对于浏览器窗口定位,意思就说就算页面发生滚动,fixed定位的元素位置也不会发生变化。

 

应用的地方其实还是挺多的,回到顶部之类,还是顶部固定的导航也会应用到。



版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS:简单讲解position属性

我在模仿页面的过程中遇到了将position属性与:before / :after 选择器联合使用的情况,觉得应该记录下来,因此写一篇文章简单讲解一下position属性的三个值及其应用场景,最后分享...

栋栋晓07:详解css布局中的定位position属性

CSS中大部分属性都可以看w3c文档可以理解,主要难以理解的属性是盒型结构,Floa,position。本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。...

css的position定位属性中值absolute与值fixed二者的区别

我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。都是绝对定位,二者有一致性,也有不同点。那么二者的区别是什么呢?那就是position的fixe...

CSS布局 ——从display,position, float属性谈起

本文转自:http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html CSS布局 ——从display,position, ...

CSS布局中position的各种属性

Position属性四个值:static、fixed、absolute和relative的区别和用法   在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,a...

CSS3理解position属性

一般情况下,页面是由页面流构成的。页面元素在页面流中的位置是由该元素在HTML文档中的位置决定的。块级元素从上向下排列(每个块级元素单独成行),而内联元素将从左向右排列,元素在页面中的位置随着外层容器...

CSS中的定位——position属性

CSS定位指的是 改变元素在页面中的位置。 CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动 绝对布局 CSS定位包含的属性有: ...

CSS之background-position属性

css

css position属性

position: relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relat...

CSS position 属性分析

position是css重要的属性,通过设置position,可以把元素放置到一个静态的、相对的、绝对的或者是固定的位置中。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css position属性
举报原因:
原因补充:

(最多只允许输入30个字)