CSS中position属性怎么用

这篇文章主要为大家展示了“CSS中position属性怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS中position属性怎么用”这篇文章吧。

创新互联建站主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务樊城,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：

CSS中position属性怎么用

其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。

1、absolute（绝对定位）

absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL）定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：





position:absolute定位

    html,body,div{
                    margin:0;   
                    padding:0;  
                    list-style:none;
    }
    .center{
                margin:30px;
                border:#999999 solid 10px;
                width:400px;
                height:300px;
    }
    .div1{
            width:200px;
            height:200px;
            background:#0099FF;
            /*设定TRBL*/
            position:absolute;
            left:0px;
            top:0px;
    }
    .div2{
            width:400px;
            height:300px;
            font-size:30px;
            font-weight:bold;
            color:#fff;
            background:#FF0000;
    }

position:absolute定位测试

.div1{ width:200px; height:200px; background:#0099FF; /*没有设定TRBL*/ position:absolute; }

position:relative定位 html,body,div{ margin:0; padding:0; list-style:none; } .center{ margin:30px; border:#999999 solid 10px; width:400px; height:300px; background:#FFFF00; } .div1{ width:200px; height:150px; background:#0099FF; position:relative; top:-20px; left:0px; } .div2{ width:400px; height:150px; font-size:30px; font-weight:bold; color:#fff; background:#FF0000; }

html,body,div,ul,li,a{ margin:0; padding:0; list-style:none; } a, a:hover{ color:#000; border:0; text-decoration:none; } #warp,#head,#main,#foot { width: 962px; } /*设置居中*/ #warp{ margin: 0 auto; } #head{ height:132px; position:relative; } .logo{ position:absolute; top:17px; } .head_pic{ position:absolute; top:17px; left:420px; } .sc{ position:absolute; right:5px; top:12px; } .sc a{ padding-left:20px; color:#666; } .nav{ width:960px; height:42px; line-height:42px; position:absolute; bottom:0px; background:url(img/nav_bj.jpg) no-repeat center; } .nav ul{ float:left; padding:0 10px; } .nav li{ float:left; background:url(img/li_bj.jpg) no-repeat right center; padding-right:40px; padding-left:20px; text-align:center; display:inline; } .nav li a{ font-size:14px; font-family:Microsoft YaHei !important; white-space:nowrap; } .nav li a:hover{ color:#FBECB7; }

首页
关于我们
团队文化
公司动态
资讯参考
业务中心
合作银行
联系我们

大橙子网站建设，新征程启航

CSS中position属性怎么用

其他资讯