04 css 基础之定位和锚点

css基础之定位和锚点
定位
定位是css当中一种操作html元素布局的方案
属性position
static
默认值，无特殊定位，对象遵循HTML原则；
absolute
绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据网页进行定位，而其层叠通过z-index属性定义
relative
相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
fixed
类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；
inherit
规定元素的定位方式继承父元素的position的属性值。
sticky
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
定位元素的层级关系z-index
auto
默认值。遵循结构，后写的定位元素层的顺序靠上。
number
无单位的整数值。可为负数，数值越大，层的顺序越靠上
Tip
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。
子元素的层级关系会受到父元素的影响
包含块
概念
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative|absoulte；
相对定位和绝对定位的区别
参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
锚点
锚点的实现主要是通过a标签。
作用：在网页的不同位置进行跳转
使用
创建一个锚点

目标
<标签名 id=‘与锚点对应的id名’>
透明
ie9及以下
filter:alpha(opacity=value);取值范围 0-100
其他浏览器
opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9—1)
rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器
flash
语法



滚动字幕
<marquee
behavior（行为）=“scroll(滚动)/alternate（晃动）” direction（方向）=“up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）”
scrollamount（滚动速度）=“value” height=“value(上下滚动范围)” width=""(左右滚动范围)>
内容