1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框) 例如:#mybox{ position:relative; left:20px; top:20px; } 效果就是使这个层向下和向左移动了20px。

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角的0点开始计算, 绝对定位使元素与文档流无关,因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布事HTML元素。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高,框在堆中的位置就越高。) 那么有个问题产生了,现在大家做的网页大部分是居中的,那么我需要这个元素跟着网页 中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的,那么单纯的 absolute是不行的。 正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父 级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute; 这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧!

div中的相对定位与绝对定位的更多相关文章

  1. css 中的相对定位和绝对定位

    1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...

  2. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  3. CSS中的相对定位和绝对定位

    1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...

  4. CSS网页中的相对定位与绝对定位

    在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...

  5. css中的相对定位与绝对定位

    之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...

  6. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  7. 遮罩层中的相对定位与绝对定位(Ajax)

    前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...

  8. div 的相对定位与绝对定位

    网 上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位.浮动等概念:二是虽然避免了“表格套表格”的缺点,却 带来了“div 套 di ...

  9. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

随机推荐

  1. P1678 烦恼的高考志愿(二分)

    emmmm,我感觉我在解题的过程中还是有点吃亏的,因为,我知道是二分,只是大概知道怎么分,没有管这道到底是需要怎样的二分.然后在题上卡了很久. 思路:要找到填报学校的录取线x和自己的分数y的绝对值最小 ...

  2. The authenticity of host 'ip (ip)' can't be established.

    问题 The authenticity of host '10.4.172.67 (10.4.172.67)' can't be established.ECDSA key fingerprint i ...

  3. XtraDB引擎

    https://mariadb.com/kb/en/library/xtradb-and-innodb/ https://mariadb.com/kb/en/library/about-xtradb/ ...

  4. DeeplabV3+ 在自己环境下跑出现的错误

    1. no module named 'deeplab' 解决办法:把 models/research 和 models/research/slim 加到环境变量path中不管用,需要在 cmd 中运 ...

  5. 环境部署(九):linux下安装python+chrome+Xvfb

    在基于selenium进行的UI自动化测试中,开发调试环境一般都是windows操作系统.完成后需要部署到专门的测试环境. 如要要部署到linux环境的服务器(阿里云.腾讯云)执行,那么测试脚本也需要 ...

  6. 面试笔记--HashMap扩容机制

    转载请注明出处 http://www.cnblogs.com/yanzige/p/8392142.html 扩容必须满足两个条件: 1. 存放新值的时候当前已有元素的个数必须大于等于阈值 2. 存放新 ...

  7. 用Python实现大文件分割

    python代码如下: import sys,os kilobytes = 1024 megabytes = kilobytes*1000 chunksize = int(200*megabytes) ...

  8. 04 Docker/基础设施 - DevOps之路

    04 Docker/基础设施 - DevOps之路 文章Github地址,欢迎start:https://github.com/li-keli/DevOps-WiKi Docker是一个开源的引擎,可 ...

  9. Python-可变参数和关键字参数(*args **kw)

    前言: Python的函数具有非常灵活的参数形态,既可以实现简单的调用,又可以传入非常复杂的参数. 可变参数和关键字参数的语法: *args是可变参数,args接收的是一个tuple: **kw是关键 ...

  10. linux下的shell脚本(基本)

    shell有些命令和格式不用老是容易忘,学而时习之,不亦说乎~ 先说明以下内容来自: http://c.biancheng.net/cpp/shell/ ,C语言中文网,请大家支持原作,点击链接查看. ...