当我们使用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. 在IE8中如何通过javascripts改变<style />中的内容?

    1.createStyleSheet() if(document.createStyleSheet){  var cssStyle=document.createStyleSheet();  //兼容 ...

  2. php 排序

    for($i=1;$i<count($result);$i++) { $tmp = $result[$i]['PNL']; $tmp_ = $result[$i]; $j=$i-1 ; for( ...

  3. 洛谷-语文成绩-[有奖]洛谷5月月赛:kkksc03的三大神器

    题目背景 Background语文考试结束了,成绩还是一如既往地有问题. 题目描述 Description语文老师总是写错成绩,所以当她修改成绩的时候,总是累得不行.她总是要一遍遍地给某些同学增加分数 ...

  4. localStorage请使用getItem 和setITem

    最近看别人的代码,发现他们在从localStorage里面的时候喜欢用dot来操作,而不是get setItem,记得以前说过这个事.下面再说一次吧. 用dot方式来操作(   每次以'hello'= ...

  5. linux nfs开启

    nfs设置: NFS的配置过程很简单.在服务器端中编辑/etc/exports文件,添加如下内容:     /home/cotton/data/cotton/zghy 192.168.2.*(rw,s ...

  6. URL匹配与req参数解析

    通配URL*(可代表任何字符串) 例如: app.get('/test/*', function(req, res){ res.send(req.query.aa); }) '/test/*通配tes ...

  7. 嵌套json

    今天一个客户问怎样把表中相同键值对应的文本按照一定顺序拼接起来.如果使用SQL实现将非常麻烦,并且效率低下.GP4.1以后提供了一个函数array_agg可以方便快捷,高效的实现该功能 比如原始查询是 ...

  8. captche验证码

    JCaptcha 是一个用来生成验证码的开源Java类库 CaptchaServiceSingleton类(单态类) package com.dongbin.testy; import com.oct ...

  9. HDU 5806 NanoApe Loves Sequence Ⅱ

    将大于等于m的数改为1,其余的改为0.问题转变成了有多少个区间的区间和>=k.可以枚举起点,二分第一个终点 或者尺取法. #pragma comment(linker, "/STACK ...

  10. 编码规范系列(二):Eclipse Checkstyle配置

    http://chenzhou123520.iteye.com/blog/1627618 上一篇介绍了<编码规范系列(一):Eclipse Code Templates设置>,这篇主要介绍 ...