CSS position特性和案例运用演试

日期：2020-12-12 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

现阶段基本上全部流行的访问器都适用position特性（"inherit"以外，"inherit"不适用全部包含IE8和以前版本号IE访问器，IE9、IE10还没检测过），下列是w3school对position5个值的解释：

在其中absolute和relative是最常见的，fixed用得也较为多（在其中IE6其实不适用fixed）。

1、absolute（肯定精准定位）

absolute是转化成觉对精准定位的元素，摆脱了文字流（即在文本文档中早已不占有部位），参考访问器的左上角根据top,right,bottom,left（简称TRBL） 精准定位。能够选择具备精准定位的父级目标（下文将说到relative与absolute的融合应用）或body座标原点开展精准定位，还可以根据z-index开展层级等级分类。absolute在沒有设置TRBL值时是依据父级目标的座标做为始点的，当设置TRBL值后则依据访问器的左上角做为初始点。实际实例以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>position:absolute精准定位</title>
<style type="text/css">
    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;
    }
</style>
</head>
<body>
    <div class="center">
        <div class="div1"></div>
        <div class="div2">position:absolute精准定位检测</div>
    </div>
</body>
</html>

这段编码造成的实际效果以下：


这是设置TRBL以后的实际效果(设定TRBL以访问器左上角为原点)，当沒有设定TRBL时（沒有设定TRBL是以父级目标的座标为原点），将要div1改为以下编码时

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


则实际效果以下：


 2、relative（相对性精准定位）

relative是相对性的意思，说白了便是相对元素自身在文本文档中应当出現的部位来挪动这个元素，能够根据TRBL来挪动元素的部位，具体上该元素仍然占有文本文档中华有的部位，只是视觉效果上相对性原先的部位有挪动。实际实例以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>position:relative精准定位</title>
<style type="text/css">
    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:⑵0px;
            left:0px;
    }
    .div2{
            width:400px;
            height:150px;
            font-size:30px;
            font-weight:bold;
            color:#fff;
            background:#FF0000;
    }
</style>
</head>
<body>
    <div class="center">
        <div class="div1"></div>
        <div class="div2">position:relative精准定位检测</div>
    </div>
</body>
</html>

编码造成的实际效果以下：


3、relative与absolute的融合应用

在网页页面设计方案时常常会用到波动来对网页页面开展合理布局，可是波动所带来的不确定性要素却许多（比如：IE访问器的适配难题）。相对性来讲，在一些合理布局中精准定位应用会更为简易、便捷、适配性更好（relative与absolute相融合来应用），下面根据网页页面中的1个案例（网页页面中的head一部分）开展表明，实际编码以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<style type="text/css">
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;
}
</style>
<title></title>
</head>
<body>
    <div id="warp">
        <div id="head">
            <div class="logo"><img src="img/logo.jpg" /></div>
            <div class="head_pic"><img src="img/head_pic.jpg" /></div>
            <div class="sc">
                <a href=""><img src="img/sc_btn.jpg" /></a>
                <a href=""><img src="img/sy_btn.jpg" /></a>
                <a href=""><img src="img/kf_btn.jpg" /></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="">主页</a></li>
                    <li><a href="">有关大家</a></li>
                    <li><a href="">精英团队文化艺术</a></li>
                    <li><a href="">企业动态性</a></li>
                    <li><a href="">资讯参照</a></li>
                    <li><a href="">业务流程管理中心</a></li>
                    <li><a href="">协作金融机构</a></li>
                    <li><a href="">联络大家</a></li>
                </ul>
            </div>
        </div>
        <div id="main"></div>
        <div id="foot"></div>
    </div>
</body>
</html>

实际效果以下图：


在上述编码中最先是给head设定relative精准定位，那末能够看到里边全部的子元素在设定absolute后都会相对性head开展精准定位，而并不是相对性body精准定位。这样相对用波动来讲就简易便捷了许多，也不必须担忧适配难题。

以上便是网编为大伙儿梳理的所有內容啦，期待对各位能有一定的协助，也期待大伙儿再次适用脚本制作之家啦~~~

上一篇：css目录拖动避免被底部遮挡住和兼容显示屏长1点 返回下一篇：用CSS特性transparent完成各种各样3角形示例编码