• 理解position 绝对定位和相对定位


    一、position的三种取值

    1、取值

    Position :   static /  absolute / fixed / relative
    static:静态   absolute:绝对定位    fixed:固定   relative:相对定位

    默认情况下:static             无特殊定位,对象遵循HTML定位规则

    absolute :
    将对象从文档流中抽出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
    relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
    fixed :  E5.5及NS6尚不支持此

    2、理解relative和absolute取值

    (1)relative

    不脱离文档流、对象不能重叠、依据left;right;top;bottom(四个至少有一个存在具体的值)等属性在正常文档流中偏移自身位置换言之,相对于自己定位的

    (2)absolute

    脱离文档流、然后使用left;right;top;bottom(四个至少有一个存在具体的值)等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位,如果父级对象没有设置定位属性,那么将遵循HTML的定位规,以body的左上角为参考进行定位、

    绝对定位的对象可以重叠,层叠的顺序可以通过z-index属性进行控制,大的在上面  

    二、relative和absolute的区别

    1、是否完全脱离了文档流

    2、relative是相对于自己进行偏移定位,absolute是相对于最近具有定位设置的父级对象进行绝对定位

    3、对象是否能重叠的问题(z-index改变层级关系)

    【题外话】最近定位用的挺多的,例如导航菜单为了有点效果,通过相对定位让它看起来有点特别,还有一些效果,对联式的广告悬浮框、还有回到顶部等。不错不错,good good study,daydayup!

  • 相关阅读:
    (转)WinForm 开发框架【加载DLL模式】
    (转)精通正则表达式(元字符)
    (转)svn入门指南
    (转)ERP 高级查询(Advanced Query)设计与实现 SQL语句解析成LLBL Gen ORM代码
    (转)工作了一个星期各位一定累了吧,那我们一起来表单验证一番吧!
    (转)ASP.net Web API综合示例
    (转)搭建SVN环境
    (转)使用T4模板批量生成代码
    (转)Sql Server参数化查询之where in和like实现详解
    scau ooxx numbers
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/3980960.html
Copyright © 2020-2023  润新知