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!

  • 相关阅读:
    写爬虫,怎么可以不会正则呢?
    从 Scrapy 学习模块导入技巧
    博客已搬家至CSDN
    更改JDK默认编码,解决DBeaver乱码问题
    【2020面试】- Java中常见集合的默认大小以及扩容机制
    【2020面试】- CAS机制与自旋锁
    【2020面试】- filter和interceptor的区别
    【20k中级开发】-面试题201117
    【开发笔记】
    RPC 调用和 HTTP 调用的区别
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/3980960.html
Copyright © 2011-2022 走看看