1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间, 绝对定位:position:absolute, 被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除.

2.父容器使用相对定位,子元素使用绝对定位后,这样的位置不再于浏览器左上角,而是相对于父容器左上角

3.相对定位和绝对定位需要top,right,bottom。Left使用来定制具体位置,这四个属性只有在该元素使用定位后才会生效,其他情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下。或及时使用左,又使用右。

CSS中的相对定位和绝对定位的更多相关文章

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

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

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

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

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

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

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

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

  5. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

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

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

  7. div中的相对定位与绝对定位

    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...

  8. CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

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

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

随机推荐

  1. hehe

    with wares as        (         SELECT distinct a.Wid as wid,         a.Wname as wareName,         a. ...

  2. androidTV第一次创建(转:支持原创)

    转载地址:http://blog.csdn.net/aa2967277/article/details/50617677 AndroidTV应用开发简介 目前,网上还没有对AndroidTV的足够的介 ...

  3. vs2012 vs2010 opencv2.4.7配置

    http://blog.csdn.net/xiaohanstu/article/details/45309149?utm_source=tuicool <pre name=.7配置 .配置 () ...

  4. Maven安装本地jar

    应用场景: 有时候一些jar包(比如oracle 的 ojdbc.jar)由于种种原因,比如版权等,导致maven中央库没有该jar文件,但是却有该jar的pom文件. 这个时候,如果私服也没这jar ...

  5. JavaScript原型学习笔记

    1 理解JavaScript原型 什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 任何一个对象都可以成为原型么? 是 哪些对象有原型 所有的对象在默认的情况下都有一个原型,因为原型本身 ...

  6. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  7. cocos2d 艺术标签没有显示

    今天自己挖了个坑,设置数字标签的时候,无论怎么搞,程序运行后还是显示的是普通文本数字,各种原因找了一半天,最后发现在资源名字.png的前面多了一个空格,眼瞎一直没看到,最后去掉就OK了

  8. iTunesConnect进行App转移2-官方说明

    Can I transfer an app to another developer's iTunes Connect account? Yes, you can transfer your app ...

  9. 【IOI2000】邮局设置问题

    现在连基础DP都要看题解和代码才能写出来了,怎么办嘛QAQ 原题: 一些村庄建在一条笔直的高速公路边上,我们用一条坐标轴来描述这条公路,每个村庄的坐标都是整数,没有两个村庄的坐标相同.两个村庄的距离定 ...

  10. Fortran学习心得

    编译调试: 服务器上所用的编译器可以编译.F90的文件,同时,经过测试已经知道有两款编译器:gfortran和ifort. 另外,查看编译器的bash命令是:gfortran -v. 编程算法思想与C ...