Web前端开发（HTML5+CSS3+JavaScript） 课件汇总 严健武 第6--11章 定位与浮动 ---BOM - 副本.pptx
Web前端基础技术;;;位置属性position：
A)relative：相对原来的位置，偏离左或右(left|right之一）、上或下（top|bottom之一）位置，一般通过改变左上角（lefttop）来改变其位置。;例1：理解相对位置的特性;B).absolute：相对具有非默认位置的父元素进行定位；脱离了原来的位置，不再占用原来位置（空间），宽度高度默认由内容决定（行内块元素特征）。;（2）定位属性;例2：理解绝对位置的特性;*{
box-sizing:border-box;
}
.container{
width:200px;
border:10pxsolidred;
/*参考定位容器*/
position:relative;
}
.containerdiv{
height:40px;
};例3理解相对谁进行绝对定位；容器的概念---实现如下的二级导航菜单效果;如果相对main进行定位，那么效果就是京东界面的导航菜单效果---试试？;例4思路扩展：相对位置和绝对位置-购物车数字和图标;style
*{box-sizing:border-box;}
a{
text-decoration:none;
color:#999;
margin:020px;
}
.container{
width:200px;
height:40px;
/*文本元素居中：
行高等于内容高度（有上下边框）*/
/*line-height:40px;*/
line-height:38px;
border:1pxsolid#ccc;
/*为购物车图标参考定位*/
position:relative;
};目标体现（练习）：模拟京东购物车效果;
body
divclass=container
ahref=我的购物车/a
divclass=cart
spanclass=num10/span
/div
divclass=line/div
divclass=drop/div
/div
style
*{
box-sizing:border-box;
}
.container{
width:200px;
height:60px;
line-height:60px;
padding-left:20px;
background-color:#ccc;
margin:100px;
/**/
position:relative;
/**/
border:1pxsolidred;
}
.containera{
text-decoration:none;
background-color:yellow;
}
.cart{
;2;C).fixed：类似绝对定位,不同的是其相对浏览器窗口定位（特殊的绝对定位），即：
固定于页面指定位置；不随页面滚动而滚动；
不占据正常块位置；宽度高度由内容决定，也可以改变；默认位置：lefttop为(00)
注意：使用left|right|top|bottom之一或组合使其固定在某个位置。;示例5京东侧边栏：相对页面的绝对定位，固定位置fixed的使用;*{
box-sizing:border-box;
}
.container{
position:fixed;
right:0;
width:40px;
top:0;bottom:0;
background-color:#eee;
}
ul{
list-style:none;padding:0;margin:0;
/*位置：为了居中显示*/
position:absolute;
width:100%;