zoukankan      html  css  js  c++  java
  • position的relative和absolute属性

         在对界面布局时,往往需要用到position属性。在W3C中,对position的定义是:规定元素的定位类型。

         顾名思义,absolute代表绝对定位。在查阅了相关资料后,发现absolute定位是相对于其包含块(containing block)绝对定位,而这个包含块不一定是父级元素。例如,当父级元素没有设定position属性,而父级以上的某个祖先元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块。也就是说,一个元素的包含块是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。如果没有找到,就以initial containing block的左上角进行定位(initial containing block:根元素外层的形状为矩形的元素)。

         其“绝对”的含义,在我理解看来,是不受包含块的padding、margin值等影响的“绝对”。再配合该元素本身的Top、Right、Bottom、Left进行定位。

         综上所述,absolute属性是用于设置子元素的位置的(相对于包含块)。

         (关于绝对定位absolute的属性,可以点击 http://www.zhihu.com/question/19926700  ,2个票数最高的回答都非常精准)

          relative代表相对定位。它始终参考父级元素的原始点为原始点,再配合该元素本身的Top、Right、Bottom、Left进行定位。如果没有父级,则以body为原始点。relative的设置效果是受父级元素的padding值等影响的。在实际使用中,我往往使用relative属性作为有absolute属性的子元素的父级。

         此外,在设置了position属性后,还可以设置z-index以设置同级元素的上下层关系,数值越大就在上层。

         文章末尾,推荐一篇关于CSS定位体系的文章,有助于对position及float属性的理解:http://www.w3help.org/zh-cn/kb/009/

         

  • 相关阅读:
    TabControl 切换 内嵌web页面直接响应滚动事件
    进程、应用程序域和对象上下文
    CSharp中的多线程——线程同步基础
    CSharp中的多线程——入门
    注重实效的程序员之快速参考指南
    学习语言技术快速入门——五步骤
    利用jQuery选择将被操作的元素
    CSharp中的多线程——使用多线程
    android开发文件介绍
    三角函数公式
  • 原文地址:https://www.cnblogs.com/May-study/p/5916189.html
Copyright © 2011-2022 走看看