1.绝对定位

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

绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。

2.相对定位

position: relative;相对定位:相对定位是相对于元素在文档中的初始位置

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

css中的相对定位与绝对定位的区别的更多相关文章

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

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

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

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

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

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

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

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

  5. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

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

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

  7. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

  8. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  9. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

随机推荐

  1. 微信 weui 初体验

    最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...

  2. [日常] nginx与HTTP cache

    去年的事,随便记记 =============================================================2017年12月11日 记录: nginx缓存:ngx_h ...

  3. ios app真正的相互!!调用

    1.需求:A应用打开B.B回跳到A   2.问题: 看到网络上的文档讲的大多数都是app单向跳转的例子,而我们在跳转到第二个app的时候往往需要返回到原来的app,虽然支付宝微信等第三方等应用会有回调 ...

  4. Spring Boot + MyBatis + Druid + Redis + Thymeleaf 整合小结

    Spring Boot + MyBatis + Druid + Redis + Thymeleaf 整合小结 这两天闲着没事想利用**Spring Boot**加上阿里的开源数据连接池**Druid* ...

  5. javaweb中如何给自己的网站更改ico图标

    我们在查看网页的时候很多网站都有自己的小图标,系统读取这个标志的时候先从你的项目的根目录下读看有没有favicon.ico文件,如果有直接显示这个图标,如果没有,则会去webapps/root/下找这 ...

  6. Jquery插件网站持续添加。。。

    Look Fro Less,Do More www.jq22.com

  7. Oracle如何把数据库表迁移到指定表空间

     问题描述: 将测试数据库中的表结果导入到正式数据库.需要在正式库中建立独立的表空间存放新导入的表,以避免和正式库中原来的表混淆. 处理步骤: 1. 在命令行中用exp指令导出测试库中指定表到指定 ...

  8. 课后作业week 5 —— 两款修图软件优势及创新分析

    由于我平时没事也会修修照片什么的,也用过一些不同种类的修图软件,这次作业就选择了其中两款比较热门的软件进行分析. 说到手机修图app,很多人很容易想到“美图秀秀”,的确这款app在修图软件领域的确算的 ...

  9. springboot学习入门之五---开发Web应用之JSP篇

    转载:http://tengj.top/2017/03/13/springboot5/ 1整体结构 整体的框架结构,跟前面介绍Thymeleaf的时候差不多,只是多了webapp这个用来存放jsp的目 ...

  10. ORACLE数据库AWR工具学习

    AWR(Automatic Workload Repository)即工作负载信息库,主要用于收集数据库运行状态的资料库,通过AWR报告可以分析ORACLE数据库的性能,从而给出优化策略. 图一:此图 ...