前端学习之路第八天——定位和锚点

1、定位

作用：改变元素位置

定位的三要素：

        元素对象：需要移动的元素

        参照物：当前元素移动参照谁

        方向值：top right bottom left

属性：position 

属性值：

        static  默认值，静态定位

        relative  相对定位

        absolute  绝对定位

        fixed  固定定位

        sticky  粘性定位

2、相对定位

属性：position

属性值：relative

        相对定位的参照物：自身初始位置

        方向值：相对于方向top、right、bottom、left。可以没有包含框的接触

        特点：不会脱离文档流，初始位置还在，不会破坏正常网页布局

        作用：给绝对定位提供参照物

3、绝对定位

属性：position

属性值：absolute

        绝对定位的参照物：如果父级元素没有定位属性，会一直往上查找，直到找到浏览器，再相对浏览器进行偏移；如果父级元素有定位属性，就相对于父级进行偏移

        特点：绝对定位会脱离文档流，破坏正常网页布局

        注意：最好使用在小范围布局中

4、固定定位

属性：position

属性值：fixed

        相对浏览器进行定位

        特点：会脱离文档流

        作用：常用于广告弹窗、聊天窗口、页面固定的位置

5、粘性定位

属性：position

属性值：sticky

        结合了相对定位和福鼎定位的特点

                不会脱离文档流，相对浏览器进行偏移

6、属性层叠

属性：z-index

属性值：auto/数值

        特点：必须咋定位环境下使用

多个定位盒子层叠在一起时(脱离文档流)，最后加载的在最上面

7、锚点

网页制作中超链接的一种，又叫锚标记。像定位器一样在页面内不同位置进行跳转

在跳转目的位置定义锚点：语法：<标记   id="命名锚记名">    </标记>

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