元素的定位

元素的定位

基本语法格式：
选择器{position：属性值；}
position: absolute;绝对定位,相对于其上一个已经定位的父元素进行定位
position: relative;相对定位,相对于其原文档流的位置进行定位
position: fixed;固定定位,相对于浏览器窗口进行定位
position: static;默认值,自动定位
position:inherit； 规定应该从父元素继承 position 属性的值。
元素定位里还有一个重要的知识点
z-index；属性只对定位元素生效。
当对多个元素进行定位时，会出现重叠现象，这个时候就可以用到z-index了，它可以调整层叠顺序，取值可以是正整数，负整数，0, 0为默认值，取值越大，定位元素在层叠元素中越居上。
定位和z-index属性的案例
html内容
< body>
< div class=“banner”>
< div class=“left”>
< div class=“content_left”>
< p class=“sc_e”>CHUANZHIBOKECHUAN
ZHIBOKE< /p>
< p class=“sc_c”>传智播客< /p>
< p class=“adv”>以就业为导向
打造理论与实践相结合的实战型人才< /p>
< ul class=“style_a”>
< li class=“cur”>< a href="#">1< /a>< /li>
< li>< a href="#">2< /a>< /li>
< li>< a href="#">3< /a>< /li>
< li>< a href="#">4< /a>< /li>
</ ul>
< /div>
< /div>
< div class=“right”>
< div class=“content_right”>
< h4>课程介绍
INTRODUCTION
< ul class=“style_i”>
< li>< a>< img src=“img/icon1.gif” />< /a>< /li>
< li>< a>< img src=“img/icon2.gif” />< /a>< /li>
< li>< a>< img src=“img/icon3.gif” />< /a>< /li>
< li>< a>< img src=“img/icon4.gif” />< /a>
< /ul>
< p class=“cl”>在传智播客设计学院，您只需要花一份学费,就可以同时学习平面设计,网页设计,UI设计,FLASH设计四门主流技术。< /p>
< /div>
< /div>
< /div>
< /body>
css内容

body{
font: 12px “微软雅黑”;
color: #fff;
}
*{
padding: 0px;
margin: 0;
border: 0px;
list-style: none;
}
.banner{
width: 1000px;
height: 285px;
margin: 13px auto 15px auto;
overflow: hidden;
}
.left{
width: 755px;
height: 285px;
font-weight: bold;
background: url(img/pic.gif);
position: relative;
float: left;
}
.content_left{
position: absolute;
top: 90px;
right: 45px;
text-align: right;
}
.sc_e{
font-size: 14px;
}
.sc_c{
font: 24px “宋体”;
background: url(img/icon5.gif) no-repeat right center;
padding-right:10px ;
}
.adv{
margin-top: 20px;
font: 16px “黑体”;
}
ul.style_a{
margin-top: 25px;
margin-left: 120px;
list-style: none;
overflow: hidden;
}
ul.style_a li{
float: left;
margin-left: 10px;
}
ul.style_a li a{
background: #fff;
border: 1px solid #ff7202;
width: 26px;
height: 22px;
text-align: center;
display: block;
color: #FF7202;
font-size: 18px;
text-decoration: none;
}
ul.style_a li.cur a{
width: 30px;
height: 26px;
line-height: 26px;
background: #FF7202;
color: #fff;
margin-top: -2px;
position: relative;
}
.right{
width: 245px;
height: 285px;
background: #1e1e1e;
float: right;
position: relative;
}
.content_right{
position: absolute;
top: 50px;
left: 30px;
}
ul.style_i{
margin-top: 10px;
}
ul.style_i li{
float: left;
margin-right:12px;
}
.cl{
clear: both;
margin-top: 55px;
margin-right: 30px;
text-indent: 2em;
line-height: 24px;
}

效果图