用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,

overflow:hidden;的设置会影响z-index失效

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

css 相对绝对定位的更多相关文章

  1. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  2. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  3. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  4. CSS的绝对定位和相对定位

    css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...

  5. css的绝对定位

    假设绝对定位的元素的id为absoluteDiv. 当包含absoluteDiv的块中没有设置position:relative时, absoluteDiv会相对于浏览器(window.top)定位. ...

  6. CSS中绝对定位依据谁进行定位?

    结论 绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的 祖辈元素(一定是祖辈元素不是同辈元素) 说明 一般会为body设 ...

  7. CSS:绝对定位布局案例 position布局实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  9. 【css】绝对定位的元素在 ie6 下不显示

    问题描述: 在 ie6 中如果一个浮动元素与绝对定位元素相邻的话,在某些情况下绝对定位元素将会消失. 产生原因: 只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时(即如果父层宽度是 300 ...

随机推荐

  1. C++编译过程与内存空间

     为什么须要知道C/C++的内存布局和在哪能够能够找到想要的数据?知道内存布局对调试程序很有帮助,能够知道程序运行时,究竟做了什么,有助于写出干净的代码.本文的主要内容例如以下: 源文件转换为可运 ...

  2. getFullYear 方法

    返回 Date 对象中用本地时间表示的年份值. dateObj.getFullYear() 必选项 dateObj 参数为 Date 对象. 说明要获取用全球标准时间 (UTC)表示的年份值,请使用 ...

  3. 段合并 segments merge 被删除的文档的删除时间

    2.5 段合并 每个索引分为多个“写一次,读多次”的段 write once and read many times  segments 建立索引时,一个段写入磁盘以后就不能更新:被删除的文档的信息存 ...

  4. <2013 12 28> AOI PCB设计

    主要设计指标: “3.多块拼板最大尺寸:60*50(CM)4. 检测速度:(230-250)片/小时 5.检测通过率:98%6.最窄线宽:设两种精度 A.最窄线宽:0.2mm, 识别精度 0.1mm  ...

  5. 洛谷 P3263 [JLOI2015]有意义的字符串

    洛谷 首先,看到\((\frac{(b+\sqrt{d})}{2})^n\),很快能够想到一元二次方程的解\(\frac{-b\pm\sqrt{\Delta}}{2a}\). 所以可以推出,\(\fr ...

  6. docker介绍和简单使用

    docker介绍 docker 为什么会有docker出现? 一款产品从开发到上线,从操作系统到运行环境,再到应用配置,作为开发+运维直接的协作我们需要关心很多东西,这也是互联网公司不得 不面对问题, ...

  7. Android系统移植与调试之------->build.prop生成过程分析

    本文简要分析一下build.prop是如何生成的.Android的build.prop文件是在Android编译时刻收集的各种property(LCD density/语言/编译时间, etc.),编 ...

  8. MySql 自适应哈希索引

    一.介绍 哈希(hash)是一种非常快的查找方法,一般情况下查找的时间复杂度为O(1).常用于连接(join)操作,如Oracle中的哈希连接(hash join). InnoDB存储引擎会监控对表上 ...

  9. docker 批量导出脚本

    用for 循环实现 docker imagesREPOSITORY                                               TAG                 ...

  10. boost之日期date_time

    date_time库使用的日期基于格里高利历,支持从1400-01-01到9999-12-31的日期. 空的构造函数会创建一个值为not_a_date_time的无效日期:顺序传入年月日值则创建一个对 ...