• CSS position


    position :static(默认值) / absolute / relative / fixed;

    如果不是默认值,元素就会脱离文档流,发生偏移。

    absolute的偏移分两种情况,主要是根据祖先元素是否有position:absolute/relative,如果有,就会根据最近的相对定位的祖先元素进行偏移,否则,就会根据文档进行偏移。

    relative会根据自身进行偏移,其在文档流中的位置依然会保留,即不会被填充,absolute就不一样。

    fixed会根据当前窗口进行偏移。但是IE6并不支持fixed。

    解决这个问题我暂时能想到两种办法,CSS表达式 和 JS绑定滚动事件。

    CSS表达式 -- * html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}会顶到左上角。

    JS -- window.onscroll = function(){};

    //IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
    解 决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
     
    IE6中的元素内部如果有元素是position:relative;的,该元素的overflow:hidden;就会失效,给该父元素加个position:relative;就能解决这个bug。
     
  • 相关阅读:
    java基础之System类
    java基础之System类
    java基础之Random类
    java基础之Math类
    java基础之Math类
    java基础之Character类概述
    MySQL数据库
    JavaScript面向对象与原型
    PHP
    sass基础用法
  • 原文地址:https://www.cnblogs.com/cy056/p/2908751.html
Copyright © 2020-2023  润新知