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. nginx进行反向代理,80端口使用

    环境说明:centos7 安装版本:tengine2.2.2 实现目的: 想用本地80端口,代理其它服务器的非80端口,实现80端口复用 [root@tiaobanji conf]# cat ngin ...

  2. [LeetCode]最大系列(最大正方形221,最大加号标志764)

    221. 最大正方形 题目描述: 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 ...

  3. 【Flask】abort和errorhandler、app_errorhandler进行请求中断及自定义异常处理

    在view函数中,如果需要中断request,可以使用abort(500)或者直接raise exception.当然我们还需要返回一个出错信息给前端,所以需要定制一下ErrorHandler.一般只 ...

  4. 初学Python——面向对象(二)

    一.抽象类.接口类和抽象接口 转自博客园魏恒https://www.cnblogs.com/weihengblog/p/8528967.html (一)接口类 什么是接口类?在继承中,我们可以声明某个 ...

  5. Nginx服务器的使用与反向代理负载均衡

    目录 Nginx服务器 一:什么是Nginx? 什么是Nginx - Nginx与其他服努器的性能比较 二:如何在Linux中搭建Nginx服务器? 常见的错误 三:Nginx的反向代理和负载均衡 什 ...

  6. Flask序列化

    我们在做后台接口的时候,对于返回值,用的最多的就是json数据格式 flask中,返回json数据格式,我们可以用到flask的jsonify函数. 对于基础序列是可以直接序列化的,但是更多的情况下, ...

  7. vue报错信息

    1.Property or method "xxx" is not defined on the instance but referenced during render. 原因 ...

  8. Linux命令(一)

    需要用Xshell连接Linux时: 先在终端输入命令:service  sshd  start(开启ssh服务) 1.netstat -tnl:查看端口状态的命令(如 查看22端口) 2.servi ...

  9. Python的math模块

    ceil(x) 返回整数 >>> math.ceil(-1.273) -1 >>> math.ceil(1.33) 2 copysign(x,y) 把y的符号给x, ...

  10. Day6 Pyhton基础之文件操作(五)

    能调用方法的一定是对象 1.对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 #-*-codeing-*-:UTF-8 #author:Weina Pang # ...