当我们使用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. Gentoo/Funtoo USE标记介绍

    Gentoo/Funtoo USE标记 USE的简单理解如下:一个软件不只包含软件本身,还包括其组件,如,文档,插件,GUI支持等.USE就是用来标记是否要安装软件的同时安装这些组件. 声明USE标记 ...

  2. chapter11_2 Lua链表与队列

    链表 由于table是动态的实体,所以在Lua中实现链表是很方便的.每个节点以一个table来表示,一个“链表”只是节点table中的一个字段. 该字段包含了对其他table的引用.例如,要实现一个基 ...

  3. solr与tomcat整合

    一.准备工作:我使用的是tomcat7.0,solr-4.8.1 solr-4.8.1解压后是这样的. 二.开始配置了 1.首先要创建两个文件夹.home和server.我是创建在与solr-4.8. ...

  4. DataTable Javascript Link not working on 2nd page

    $(document).ready(function () { var otable = $('#tbl-resources').dataTable( { bJQueryUI: false, bFil ...

  5. windows 查 mac

    各位,登记一下新电脑 序列号 和 MAC,麻烦大家私信发给我.1.序列号在主机有标签,类似 "Servial NO.   4CV5149L2H"2.MAC,按<“开始”+r  ...

  6. ios可变数组的所有操作

    #pragma mark 创建数组c NSMutableArray * array =[[NSMutableArray alloc] initWithObjects:@"a",@& ...

  7. java编码问题

    工作中经常遇到java编码问题,由于缺乏研究,总是无法给出确切的答案,这个周末在网上查了一些资料,在此做些汇总. 问题一:在java中读取文件时应该采用什么编码? Java读取文件的方式总体可以分为两 ...

  8. hdu_5676_ztr loves lucky numbers

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5676 在这%一下安神,用了我没见过的黑科技next_permutation,至少我是今天才知道的 #i ...

  9. Ansible11:变量详解【转】

    一.在Inventory中定义变量 详见<Ansible2:主机清单> 二.在Playbook中定义变量 1.通过vars关键字定义: vars: http_port: 80 server ...

  10. Linux中nmon的安装与使用【转】

      一.下载nmon. 根据CPU的类型选择下载相应的版本:http://nmon.sourceforge.net/pmwiki.php?n=Site.Downloadwget http://sour ...