07、HTML&CSS-定位和锚点

每天一句：如果能走的时候请不要站着，能跑的时候请不要走，能飞的时候请不要跑。

一、position 定位

  语法：
     position：static /absolute/relative/fixed

static: 默认值，无特殊定位，对象遵循HTML原则;
absolute: 绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位(absolute/relative)设置的父元素进行绝对定位;若没有父元素，则以html、body，浏览器的位置为相对位置，而其层叠通过z-index属性定义;(相对于谁？)
relative: 相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置(相对于谁呢？相对于它自己本身，即是在原来位置上偏移，而且注意原有位置就是在保留的);
fixed: (固定定位)未支持，对象定位遵从绝对定位方式(absolute;但是要遵守一些规范);

例如: 教室中的学生位置，绝对定位就像是大学的教室位置，人不在了，其他人就可以占用这个位置；
而相对位置就像小学生，请假了，虽然人不在，但是其他同学也不能占他的位置；
虽然学生都不在位置上，但是两种效果是不同的；

二、绝对定位和相对定位的区别

参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；
绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间;

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；【包含块是参照物】
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
(定义元素为包含块：给绝对定位元素的父元素添加声明position：relative;)

四、定位元素层叠属性

 语法:
    z-index : auto | number // 检索或设置对象的层叠顺序

 说明:
    auto：默认值，遵从其父对象；
    number:无单位的整数值，可为负数；

 备注:
    > 较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠;
    > 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象;
    > 除了可以调整层级以外，其实可以通过层级将某元素给隐藏；

五、命名锚点链接的应用

定义:是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍;

 命名锚点链接的应用：
   1)命名锚点的作用：在同一页面内的不同位置进行跳转;
   2)给元素定义命名锚记名
      语法: <标记 id="命名锚记名">    </标记>
   3)命名锚记连接
      语法: <a href="#命名锚记名称"></a>

六、其他(滚动字幕)

 <marquee behavior=“scroll/alternate”  direction="up/down/left/right" scrollamount=“value” height="value" width="value">
     内容
 </marquee>

 说明：
     behavior（行为）="scroll(滚动)/alternate（晃动）
     direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）“
     scrollamount（滚动速度）="value"
     height="value(上下滚动范围)"
     width=""(左右滚动范围)

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

最后编辑于：2018.10.20 10:13:36