当我们使用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. JSP table中除了第一行(标题)其他全清空

    表格如下 <div style="overflow-x: auto;width: 800px"> <table id="taresults02" ...

  2. hdu 1210 Eddy's 洗牌问题

    Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如果他有2N张牌,编号为1,2,3..n,n+1,..2n.这也是 ...

  3. 高精度运算专题1-加法运算(The addition operation)

    这个专题呢,我就来讲讲高精度的加法,下面是一个计算加法的函数(用数组a加上数组b结果存到数组c里面). 思路:先测一下数组a和数组b的长度,分别放到a[0].b[0]里面去,再从第二位开始相加,记得满 ...

  4. iOS 数组字典操作

    iOS开发中需要大量对dictionary和array进行操作,因此我们需要一种更加安全可靠的操作方法来避免不必要的crash.当然可以通过自定义dictionary 和array重载增删改查的方法来 ...

  5. iOS 加载本地的html文件

    方法1: self.webView  = [[UIWebView alloc]initWithFrame:self.view.bounds]; NSString *path = [[NSBundle ...

  6. HTML+CSS D09 定位

    1.定位 (1)相对定位 如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动. #box_relative {  positi ...

  7. HYSBZ 1053 反质数

    input n 1<=n<=2000000000 output 不大于n的最大反质数 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g( ...

  8. TCP/IP体系结构

    如果你确实还没接触过网络.数据通信方面的技术,那么咱们的路还很长,至少我认为软件测试并非只停留在上层的应用,而测试的最高境界应该是对底层核心技术的测试,通过架构分析.协议数据包分析等等来测试出结果-- ...

  9. Entity Framework技巧系列之十三 - Tip 51 - 55

    提示51. 怎样由任意形式的流中加载EF元数据 在提示45中我展示了怎样在运行时生成一个连接字符串,这相当漂亮. 其问题在于它依赖于元数据文件(.csdl .ssdl .msl)存在于本地磁盘上. 但 ...

  10. android网络编程之HttpUrlConnection的讲解--实现文件断点下载

    1.没有实现服务器端,下载地址为网上的一个下载链接. 2.网络开发不要忘记在配置文件中添加访问网络的权限 <uses-permission android:name="android. ...