当我们使用position的时候,一般来说外面的框架是使用relative,里面的元素使用absolute的,这里有两个注意点:

1.如果我们不给父类一个position属性的时候,那么子元素就会以body为参照物,于是东西就自动【跑掉了】,所以父类的position是必不可少的。

 2. 如果父类使用的position也是absolute的时候,父类也会一起脱离文档流,使得父元素不占对应的空间从而导致元素崩溃,即——各个元素摆放位置错乱。而且父元素因为是absolute,所以对应的对象变成了body,导致你就只能精巧的计算元素的位置,然后【凭空】放上去。

为什么总是要求使用position的时候父类是relative的更多相关文章

  1. CSS中position属性 (absolute,relative,static,fixed)

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

  2. css position 应用(absolute和relative用法)

    1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位 ...

  3. 【学习笔记】HTML position(static、fixed、relative、absolute)

    [本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">   ...

  4. 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题

    一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...

  5. $(window).scrollTop() 获取当前的鼠标位置 offset.left()指定标签在html中的坐标 offset.top() 指定标签在html中的坐标position() 指定标签相对父(relative)标签的坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  7. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  8. position属性的四个value

    As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...

  9. position&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

随机推荐

  1. 引用头文件顺序问题 error C2039

    建的WTL工程,用到CString和DataExchange 因为WTL和ATL都有对CString的定义 当先包含 atlstr.h 再包含 atlddx.h 时会出现以下错误 error C203 ...

  2. 洛谷-火柴棒等式-NOIP2008提高组复赛

    题目描述 Description 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: ...

  3. Jekyll: .md to .html with self defined themes..

    theme is from here $ gem install jekyll bundler ~ $ jekyll new my-awesome-site ~ $ cd my-awesome-sit ...

  4. POJ1613 147/思维题

    题目链接[https://www.oj.swust.edu.cn/problem/show/1613] 题意:输出第K小的由1.4.7数字组成的数字. 解题过程:1.4.7.11.14.17.41.4 ...

  5. CCNET+MSBuild+SVN实时构建的优化总结

    本文不是介绍如何使用CCNET+MSBuild+SVN构建自动编译系统,相关的内容可以从很多地方获取,可以再园子里搜一下. 随着我们的SVN库日益壮大,容量达到10G,几十G 甚至更大时,我们发现自动 ...

  6. chrome浏览器调试工具的使用

    废话不多说,给大家介绍一下最基本的浏览器调试工具

  7. IOS把图片缓存到本地的几种方法

    把图片缓存到本地,在很多场景都会用到,如果是只储存文字信息,那建一个plist文件,或者数据库就能很方便的解决问题,但是如果存图片到沙盒就没那么方便了.这里介绍两种保存图片到沙盒的方法. 一.把图片转 ...

  8. VS中的快捷键快速格式化代码,使好看,整齐

    在VC2005中,快捷键是Ctrl + K, Ctrl + F, 这是一个组合键,即先按Ctrl + K, 这时候编辑器会等待下一个按键动作,此时再按Ctrl + F, 即可以格式化代码了,当然,也可 ...

  9. OpenCV成长之路:图像滤波

    http://ronny.blog.51cto.com/8801997/1394138 OpenCV成长之路:图像滤波 2014-04-11 14:28:44 标签:opencv 边缘检测 sobel ...

  10. AJAX校验商品价格(类似校验用户名)

    服务器端程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <%@ WebHandler Language=" ...