CSS**文档流

 

- CSS 有三种基本的定位机制：**普通流、浮动流、定位流**。

   position定位属性，检索或设置对象的定位方式

position属性值

absolute     不脱离文档流

相对于父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定“left”、“top”、“right” 以及 “bottom”属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)

relative  脱离文档流

是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）** |

fixed   脱离文档流

相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

sticky

可以看出是`position:relative`和`position:fixed`的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

当top=30px；滑到30px就会固定

 

定位元素层次关系

z-index : auto |number

检索或设置对象的层叠顺序。

auto：默认值。

number:无单位的整数值。可为负数

没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

 

marquee滚动字幕的应用：

<marquee

behavior=“scroll/alternate”  滚动形式 

direction="up/down/left/right"    滚动的方向 

scrollamount=“ ”              滚动速度

height=" "                  滚动的范围（上下左右） 

width=" ">            

这里放的是内容

</marquee>

**说明：**

behavior（行为）="scroll(滚动)/alternate（晃动） 

direction（方向）="up(从下向上)/down（从上向下） 

/left（从右向左）/right（从左向右）“ 

scrollamount（滚动速度）="value" 

height="value(上下滚动范围)" 

width=""(左右滚动范围) 

 

 锚点

 

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记   id="命名锚记名">    </标记>

2)命名锚记连接

语法：<a href="#命名锚记名称"></a>

html样式

css样式

 

效果展示