CSS3浮动与定位

通过这段时间的学习，训练与交流深化了很多知识点。下面就为大家介绍一下在网页编写过程中浮动与定位这两个知识点遇到的问题与心得。浮动是网页布局中常用的方式。定位是非常实用的技术，在编写大量的网页内容时肯定会用到。如：导航栏，侧边栏菜单，轮播，窗口漂浮的广告...

float浮动

1、float浮动

可以分为左浮动和右浮动和默认不浮动（none）。

float: left |  right  | none

2、有几个突出特点和影响

浮动后，它会漂浮在其他没有浮动盒子之上。

盒子浮动后，宽高会只包含内容的大小。

子盒子浮动会影响父盒子的大小。

注意：两个盒子呈嵌套关系时当子盒子都浮动后，对子盒子设置 margin-top时父盒子会随着子盒子同时下移，产生盒子塌陷,并且 margin-top看不到效果。

3、受影响后解决办法有

1.直接扩展父盒子的height高度。

2.给父盒子添加溢出隐藏：overflow：hidden；

3. after伪类清除浮动。 外部盒子的after伪元素设置clear属性。或额外添加一个空盒子使用clear：both；清除两边浮动。用于解决浮动引起的盒子塌陷问题。

4.在父盒子中设置上内边距：padding-top；
padding-top:1px;

5.给父盒子设置相对定位,子盒子设置绝对定位(子绝父相);
position：relative;
position：absolute;

6. 在父盒子中设置上边框：border-top;
border-top: 1px solid transparet；
设置透明上边框,不影响外观.

Position定位

Position定位方式

static 默认值，没有定位。

relative相对定位

absolute绝对定位

fixed固定定位

定位元素可以设置left（左），right（右），top（上）,  Bottom（下）偏移量

1.Position：relative相对定位

相对定位的特点

1以原本位置作基点偏移

2依然是标准文档流，原本位置还占据着

2.position：absolute绝对定位

绝对定位的特点

1绝对定位是以最近的祖先作基点偏移的，祖先都没设置定位，则以浏览器窗口作基点偏移

2相对定位的元素已经脱离了标准文档流

3.Position：fixed固定定位

固定定位的特点

1是以浏览器窗口作为基点偏移

2始终固定在某个位置，会随着浏览器滚动条滚动

3固定定位的元素，脱离标准文档流

注意：制作网页的过程中很可能会遇到多个定位后的元素覆盖其他元素产生冲突所以设置z-index层次属性非常的重要。

Z-index属性

当元素定位后会显示在其他盒子的上方，我们可以通过z-index属性对层次进行调节

z-index的取值为整数值，越大层次越高，默认值为0 ，可设置为负数,z-index属性只能用在定位的元素上使用