Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位.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%;