HTML5定位

HTML5定位

理解：
position:
relative:是以原来的位置来移动的，所以要保留原来的位置,所以还在文档流中。
absolute：是以父类的左上角（其实是4个角中一个，我爱用左上角）来定位
top和left 左上角
left和bottom 左下角
bottom和right；右下角
righ和top 右上角
fixed:（同理上面的4个角来定位）就是固定在浏览器的内容一个地方，不会移动，就是浏览器向下时，他也跟着向下，（小广告）

static：默认，没有定位【还在文档流中】
HTML5定位

relative：相对定位，基准是自身原来的位置【还在文档流中】
HTML5定位

相对定位的盒子原来的位置会被保留下来，所以用清除浮动的话就没效果，清除浮动是认原来的位置的
**相对定位没有脱离文档流就是有位置保留
绝对定位脱离文档流就是位置没有保留**
偏移量：设置定位后，可以使用left/top和right/bottom，设置偏移量
HTML5定位

absolute：绝对定位，基准是已定位的祖先元素，无则使用固定定位【脱离文档流】

常用方式：父元素使用相对定位，子元素使用绝对定位并偏移
示例1：轮播广告

上面的还可以用在下面这样的例子

示例2：下拉菜单
HTML5定位

然后

下拉菜单就是父类用相对定位，但是不移动位置（所有的就不变），而子类用的是绝对定位，设置位置。
然后有关超链接的lv-ha的理解就是所有的标签都可以用这个样式，那么上面的还有一个小知识点就是让子类在鼠标未触碰父类时，让它
display:none; 不显示，且不占位置；
visibility:hidden; 不显示，但会占位置。
而在鼠标触碰父类时（也就是悬浮父类时）让子类以块显示出来。
HTML5定位
下拉菜单就是用父类用相对定位，子类用绝对定位（父类在link时子类display：none ，父类 hover时子类display：block或者是line）
fixed：固定定位，基准是浏览器内容区的四个角【脱离文档流】