zoukankan      html  css  js  c++  java
  • 学习笔记day6:position index结合

    z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

     

    margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-rightmargin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。

    浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。

    当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面

    z-index只能在position属性值为relativeabsolutefixed的元素上有效。

     

    z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。

     

    向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。

     

    ie67下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0

    Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。

     

    负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。

  • 相关阅读:
    利用docker搭建rtmp服务器(1)
    ES6转换为ES5
    一些乱七八糟的东西
    xss攻击和sq注入
    python asyncio笔记
    图解密码技术一些笔记
    做网页前端遇到的一些问题
    错误处理的一些想法
    吐槽下国内的云笔记
    python的编码问题
  • 原文地址:https://www.cnblogs.com/fengluzheweb/p/5422614.html
Copyright © 2011-2022 走看看