CSS布局学习之定位.docxVIP

让每一名学员高薪就业 CSS布局学习之定位 对于定位而言，有广义和狭义之分。 狭义定位：指的用position属性进行定位； 广义定位：指的用标准流、浮动等各种方法完成网页元素的定位。 position属性有四个值： static 如果一个元素没有position属性，默认就是static静态定位的意 relative 相对定位 absolute 绝对定位 fixed 固定定位（IE6不兼容，IE7及以上版本开始兼容） 首先我们来学习相对定位： 一、相对定位特性： 1、相对定位不脱标 任何一个元素，都可以进行相对定位。只需要给元素设置： position:relative;那么元素就是相对定位的元素了。 新建一文件 div id=box1/div div id=box2/div div id=box3/div div{ width:50px; height: 50px; } #box1{ background-color:red ; } #box2{ background-color:blue ; } #box3{ background-color:green ; }  原始状态给蓝色盒子加上position:relative 后  结论：页面没有任何改变，那么说明相对定位不脱标！ 接下来再给蓝色盒子添加：top:30px left:60px; 观察结果如下图 2、相对定位可以根据偏移属性来确定位置，当标签设置了相对定位后，会使其从正常位置移走，但原来所占的位置并不会消失。 ---再来测试，给蓝色盒子添加 margin-bottom:100px, 相对定位的盒子，可以施加margin，不过都是在自己的本来的位置施加产生效果。 接下来测试各种定位方向: Left: Top: Right: bottom 3、任意的定位值要知道移动方向 在相对定位中，可以任意选择定位的4个属性，并且属性的值可以为负数。 下面四种方向的搭配都是合法的： top：15px； left：30px ；  top：15px； right：30px  bottom：15px； left：30px  bottom：15px； right：30px  在使用这些组合的时候，你必须清楚知道这个盒子要怎么移动？ 【换算法】 把所有都换算成top、left表示，你不就不晕了么？ 新建文件测试 例如： bottom：-50pxright: -30px; 等价于 top:50px; left:30px; 例如： bottom:60px; left:-50px; 等价于： top:-60px; left:-50px; 引言： 前面我们了解到任何元素都可以进行相对定位，那么元素是否也可以进行相对定位呢？答案是可以的。 4、浮动的元素可以进行相对定位 浮动的元素可以进行相对定位，还是前面说的，就是微调元素的位置。 新建文件测试：【借用经典导航代码】  /*相對定位不會撐大盒子寬和高*/ 5、相对定位的用处 由于相对定位的特点 作用1：微调元素。 最常见的作用，就是微调按钮和输入框的相对位置： 但是注意:不要滥用相对定位，该用padding、margin都要正常使用！ 作用2：成为绝对定位的参考盒子 子绝父相，父盒子要设置成为相对定位。 接下来我们马上学习绝对定位。 二、绝对定位 新建一文件   运行结果如下图： 说明：绝对定位脱标。再不写其他的情况下自己本身还是在老位置。 1、绝对定位脱标 现在，我们就学习了两种脱标的方式：浮动、绝对定位。 接下来了解绝对定位的参考点 2、绝对定位的参考点 绝对定位中，采用top值进行定位，那么参考原点是页面的左上角（与left配合），或者右上角（与right配合） 2.如果采用bottom值进行定位，那么一定是以第一屏显示器的左下角（与left配合），或者右下角（与right配合）。 3.但是页面卷动的时候，能够卷动走盒子。 bottom定位是很复杂的，以前的百度的页面采用的就是bottom定位： 接着为为蓝色盒子补充代码: position:absolute; top:30px; left:40px; 为了更好的理解“页面”，接着往页面中添加内容，使浏览器窗口中出现垂直滚动条。移动滚动条观察。 再测试 top: right: 【不是以显示器，也不是以浏览器的左上角】 绝对定位中，采用top值进行定位，那么参考原点是页面的左上角（与