美文网首页
CSS-position-2

CSS-position-2

作者: 张盛泽 | 来源:发表于2017-07-07 16:38 被阅读0次

    CSS-position系列属性

    <pre>
    CSS-position系列属性总结,写记下来,希望对大家有帮助,供新人学习,老人查阅,共勉。
    ------DanlV
    </pre>
    position属性一般分为三个方面:相对定位(position:relative)、绝对定位(position:absulote)、固定定位(position:fixed)。下面具体来写这三种的特点及其用法。

    相对定位position:relative

    什么是相对定位?

    相对定位是根据自己原来的位置来进行移动定位。

    相对定位的特性

    1.微调元素,相对于自己原来的位置移动,位移通过设置方向left right top bottom的值来进行移动
    2.不脱标,形影分离,身体留在原本位置(本体看不见但还是占有位置),影子移动
    不脱标:不脱离标准文档流和标准文件流

    相对定位常见用途

    1.微调元素
    2.做绝对定位的参考 -- 子绝父相 即:子元素采用绝对定位,父元素采用相对定位

    绝对定位 position:absolute

    什么是绝对定位?

    根据参考元素来进行定位。

    绝对定位的特性

    1.根据参考点来进行位移

    • 位移通过设置方向left right top bottom的值来进行移动
    • 参考点
      --- 绝对定位的元素没有父元素
      --->绝对定位的参考点,如果用top描述,那么定位参考点就是
      页面的左上角,而不是浏览器的左上角
      --->如果使用bottom来描述,就是浏览器首屏窗口,左下角
      --- 如果父级有定位属性
      --->就以父级为参考点,如果父级没有定位,就继续向上层去找
      --->如果一个盒子设置了绝对定位,并且向一个方向上位移,那么与这个方向相同的padding值将会失效
      2.绝对定位脱标 ,如果父元素没有相对定位,那么脱标带来的影响将无法解决。
      TIPS:子元素采用绝对定位的话,所对应的参考系为父元素的定位,若父元素定位无,则向上寻到已定位的元素,根据此元素绝对定位。

    绝对定位的盒子居中

    1.绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。
    2.居中:left:50%;margin-left:负的宽度的一半。

    固定定位position:fixed

    • 固定定位就是相对浏览器窗口定位。页面无论如何滚动,这个盒子显示位置不变
    • 固定定位的盒子脱标
    • 缺点:ie6不兼容

    z-index

    在定位的盒子两个之间产生覆盖时,造成一个盒子盖住另一个盒子的现象,可以设计z-index属性值来说设置优先级。

    • z-index值表示谁压着谁。数值大的压盖住数值小的。
    • 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
    • z-index值没有单位,就是一个正整数。默认的z-index值是0
    • 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
    • 从父现象:子元素的z-index值再大也打不过父元素,父元素之间的相互比较定级,子元素听从父元素的z-index的胜负。

    相关文章

      网友评论

          本文标题:CSS-position-2

          本文链接:https://www.haomeiwen.com/subject/jlcrhxtx.html