1.  relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

2. absolute(绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。但与relative的区别是其在正常流中的位置不再存在。absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接 父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

定位属性为absolute的元素定位于其父级元素内，只有满足两个条件： 
　 第一：设定TRBL 
　 第二：父级设定Position属性 
　

position记录的更多相关文章

  1. position记录元素原始位置

    position记录元素原始位置 css样式: li { width: 100px; height: 100px; margin: 10px 0 0 10px; background-color: # ...

  2. unity position 记录

    localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标,与自身锚点(Anchors)无关.anchoredPosition为矩形中心点(Pivot)与 ...

  3. 使用C#处理基于比特流的数据

    使用C#处理基于比特流的数据 0x00 起因 最近需要处理一些基于比特流的数据,计算机处理数据一般都是以byte(8bit)为单位的,使用BinaryReader读取的数据也是如此,即使读取bool型 ...

  4. 设计模式(十)：从电影院中认识"迭代器模式"(Iterator Pattern)

    上篇博客我们从醋溜土豆丝与清炒苦瓜中认识了“模板方法模式”,那么在今天这篇博客中我们要从电影院中来认识"迭代器模式"(Iterator Pattern).“迭代器模式”顾名思义就是 ...

  5. mha安装使用手册

    mha安装使用手册 注:目前mha最新的版本代码已经不放到google code网站了,而是放在github上,最新的版本为0.57,github链接如下: mha manager:https://g ...

  6. Java读取文件的几种方式

    package com.mesopotamia.test; import java.io.BufferedReader; import java.io.ByteArrayInputStream; im ...

  7. TreeView使用

    1.添加节点,实现拖拽功能 private void Form1_Load(object sender, EventArgs e) { TreeNode node1 = new TreeNode(); ...

  8. Android九宫格界面实现点击每个格点击跳转界面

    刚开始有个任务就是做一个九宫格界面,后来有个任务就是实现点击每个格并跳转界面实现每个格的功能.下面我就介绍一下我是如何实现该功能的 首先写一下我的想法是: 登录成功后显示一个九宫格界面,每个九宫格的每 ...

  9. Unity 移动端触摸屏操作

    Unity 触屏操作 当将Unity游戏运行到IOS或Android设备上时,桌面系统的鼠标左键可以自动变为手机屏幕上的触屏操作,但如多点触屏等操作却是无法利用鼠标操作进行的.Unity的Input类 ...

随机推荐

  1. Snail—UI学习之导航视图控制器UINavigationController(系统)

    背景 有一个根视图控制器 然后跳转到第一个界面  第一个界面能够返回到根视图 也能够跳转到第二个视图 第二个视图能够直接返回到根视图 新建三个ViewController    RootViewCon ...

  2. 【POJ 2195】 Going Home（KM算法求最小权匹配）

    [POJ 2195] Going Home(KM算法求最小权匹配) Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submiss ...

  3. 从C10K到C10M高性能网络的探索与实践

    在高性能网络的场景下,C10K是一个具有里程碑意义的场景,15年前它给互联网领域带来了非常大的挑战.发展至今,我们已经进入C10M的场景进行网络性能优化. 这期间有怎样的发展和趋势?环绕着各类指标分别 ...

  4. thinkphp里面的or查询

    thinkphp里面的or查询 whereOr 方法 使用whereOr 方法进行OR 查询: Db::table('think_user') ->where('name','like','%t ...

  5. 浏览器Console创建canvas base64 png图片

    火狐中运行:console.log var canvas = document.createElement('canvas'); canvas.width =1 canvas.height =1 ca ...

  6. scikit-learn 为机器学习

    如何使用 scikit-learn 为机器学习准备文本数据   欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 文本数据需要特殊处理,然后才能开始将其用于预测建模. 我们需要解析文本,以删除被 ...

  7. HTTP 各种特性应用（二）

    一.Cookie 通过 Set-Cookie 设置. 下次浏览器请求就会带上. 键值对,可以设置多个. Cookie 属性 max-age 和 expires 设置过期时间 Secure 只在 htt ...

  8. java httpRequest和Response

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

  9. 03012_预处理对象executeQuery方法（实现数据库的查询）

    1.概述 (1)通过预处理对象的executeQuery方法,完成记录的select语句的执行: (2)操作格式统一如下: ①注册驱动: ②获取连接: ③获取预处理对象: ④SQL语句占位符设置实际参 ...

  10. HRBUST 1818 石子合并问题--直线版

    石子合并问题--直线版 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HRBUST. Original ...