Day08 定位

一、定位    position

  1.static       (默认值)无特殊定位，对象遵循HTML原则；

  2.relative     相对定位

    概念：

      <1>相对自身原本的位置进行定位。(正数向元素中心走，负数向元素外界走)

      <2>具体参考偏移量进行移动。

      <3>不脱离文档流，仍然占据原本的位置。

  3.absolute     绝对定位

    概念：

      <1>绝对定位的参照物为包含块，如果父元素是包含块就针对父元素定位。如果父元素不是包含块，

      那么就向上层寻找，一层一层寻找，直到body为止。

      <2>完全脱离文档流，元素不再占据原本位置。

      <3>具体参考偏移量进行移动。

     

    关于包含块：

      <1>包含块是绝对定位的基石，绝对定位参考包含块进行偏移。元素添加定位后，就是一个包含块。

    说白了，绝对定位就是看父元素有没有添加定位，如果有，就针对父元素进行偏移，如果没有，就找父元素的

    父元素，一层一层往上找，知道body为止。

      <2>如果父元素本身不需要定位，而我们的子元素想要参考父元素进行绝对定位，那么我们可以给

        父元素设置position:relative;这样不会对页面造成影响。

  4.fixed        固定定位

    概念：

      <1>参照物为浏览器可视窗口，针对于浏览器可视窗口进行定位。

      <2>脱离文档流。

  5.sticky       粘性定位

    概念：

      <1>参照物为距离自己最近的具有滚动条的元素。

      <2>不脱离文档流。

二、偏移量

  概念：控制定位元素如何进行位移。

  top        上

  left       左

  right      右

  bottom     下

  left和right同时使用，left优先生效。

  top和bottom同时使用，top优先生效。

  注意：偏移量只对定位的元素生效，对于没有定位的元素无效。

三、定位属性的层叠性     z-index

  1.层叠性显示规则：

    <1>定位元素会盖着未定位元素（添加static属性值不算定位。）

    <2>如果都添加定位，html结构后写的盖着先写的。

    <3>z-index属性可以改变定位的层叠关系，z-index越大，层级越高。

    注意：z-index只对定位元素生效。

  2.z-index   取值为number;

      案例   z-index:1;

四、定位元素的一些应用

  1.position取值为absolute和fixed时，可以将元素类型偷偷转换为块元素。

      总结：脱离文档的元素，基本上都会偷偷转换为块元素。

  2.元素在父元素中水平垂直居中

    方法1:

      (1)给大盒子写个position:relative;

      (2)给小盒子写

        position:absolute;

        left:50%;

        top:50%;

        margin-top:负的小盒子高度的一半;

        margin-left:负的小盒子宽度的一半;

    方法2:

      (1)给大盒子写个position:relative;

      (2)给小盒子写

        position:absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

  3.元素在页面中永远水平垂直居中

  方法1:

      给盒子写

        position:fixed;

        left:50%;

        top:50%;

        margin-top:负的盒子高度的一半;

        margin-left:负的盒子宽度的一半;

    方法2:

      给盒子写

        position:fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

五、锚记

  1.作用：可以在页面的不同位置进行跳转。

  2.实现：

      <div id='box1'></div>

      <a href='#box1'></a>

  3.原理：

    a标签可以进行跳转，当我们不写页面路径时，默认跳转当前页面

    id在一个页面中是唯一的，那么我们a标签，href可以跟一个id名

    这样就能跳转到指定的位置。

六、元素透明   opacity

  作用：让元素整体变得透明，包括里边的子元素和文字。

  opacity     取值范围0-1之间

      0为全透明     1为不透明