zoukankan      html  css  js  c++  java
  • 理解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!

  • 相关阅读:
    0基础学小程序----day1
    比较两个库的表信息
    SQL Server 2008 临时解除约束删除表中数据
    HTML5音乐、视频等新媒体播放标签video、audio、embed与object介绍以及使用方式
    Docker最全教程——从理论到实战(一)
    SQL Server查询优化方法
    idea插件esayCode自动生成代码(代码生成器)
    SQL Server 小技巧
    Java和C#与SQL Server、MySQL和Oracle数据类型对照映射表
    笔记 | 史上最全的正则表达式
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/3980960.html
Copyright © 2011-2022 走看看