• 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则会脱离文档流,建立层叠上下文。

  • 相关阅读:
    什么是长尾关键词?【摘】
    Visual Studio 2010已经发布,简单列举一下新特性,重点学习一下
    增加反向链接的35个技巧【摘】
    鼠标移动上变为手的样式的css,cursor: pointer或者CURSOR: hand
    百度空间地址栏的logo咋成了迅雷的logo了,被攻击后遗症?
    百度优化技巧和方法【摘】
    asp入门之分页
    asp入门之操作数据库
    asp入门之简单介绍
    asp入门之在线编辑器(QQMail HtmlEditor 菜刀版 1.2版)改进版
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4724841.html
Copyright © 2020-2023  润新知