zoukankan      html  css  js  c++  java
  • css元素position定位和z-index

    网页元素定位

    1.注意点:

    1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高。此时最好使用min-height。

    2)对于同一个元素,不要讲float属性和(absolute,fixed)定位方式结合使用,但是和(static,relative)一起使用,(圣杯布局貌似就有将float与position:relative相结合的例子).传统布局的三法宝:dispaly,position,float有时候结合使用能够实现各种各样的结果,当然在新版本浏览器中,很多实用flex更简单啦

     

    2.css提供了四种类型的定位:

    1)静态定位static:这是浏览器默认的定位方式,按照简单的从上到下的顺序排列页面流。

    2)绝对定位absolute:使得页面元素脱离页面流,并将它置于网页的上层,有时候会遮挡住其他的内容。如果一个标签的位置是绝对的,并且它又不在任何设定了absolute,relative,fixed定位的元素里面,那么它就是相对于浏览器的窗口进行定位。如果一个标签处在设定了absolute,relative,fixed定位的标签里面,那它就是相对于该外围元素的边沿进行定位。

    3)相对定位relative:让元素相对于它在网页的默认位置定位,并在元素未进行相对定位之前所处的位置上留下一个窟窿。因此,相对定位的好处有时候并不在于移动元素(虽然这点有时候也能实现一些特殊的效果),而是给它内部的元素设定一个新的参考点,此时相对定位的含义是“相对于我”定位,即设置了relative属性的外围元素,获取了一个绝对定位,该元素里面要定位的元素则获得了针对于该元素边沿的相对定位。

    4)固定定位fixed:锁定在屏幕的某个位置,始终相对于body进行定位,与background-attachment:fixed类似。用户滚动元素时,固定元素会在页面上保持不变。

     

    z-index:

    关于z-index的介绍,参见这篇博客:http://www.cnblogs.com/bobodeboke/p/css.html

    具体地说,有一下几点:

    1)只有position的值为relative/absolute/fixed中的一个,Z-index才会生效;如果position为static,z-index是不会生效的;

    2)当一个div的Z-index为整数时,它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。当一个div的Z-index为auto时,如果它和它的兄弟进行比较,采用它父元素的Z-index。

    3)z-index不设置与设置为0的区别:如果不设置Z-index那么默认值为auto,则不建立层叠上下文。设置为0则会脱离文档流,建立层叠上下文。

  • 相关阅读:
    Mysql使用存储过程快速添加百万数据
    ArcMap连接远程数据库报错“ Connection was attempted with an older version of SQL Server client communications software that is not supported.”
    uart write example
    Solution to errors like /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found
    读.txt数据并合并~读npy数据并合并
    JVM类加载路径查看
    磨人的R语言安装问题(以安装monocle为例)
    js 删除数组几种方法
    vue 脚手架运行报错常见问题--'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件
    vue 脚手架运行报错常见问题--vue-cli Failed to download repo vuejs-templates/webpack
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4724841.html
Copyright © 2011-2022 走看看