1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图:

  

    以盒子中心为基准,为每条边的正方向,例:

      向右移动20px :  代码为left:20px;或者right:-20px;

      向下移动20px  :      代码为top:20px;或者bottom:-20px;

      

2 . 绝对定位:absolute

  以其第一个定位的祖辈级盒子为标准,定位祖辈级的中心方向为正,如下图:

    

3 . 固定定位fixed,是独立于body标签之外的,只以网页html为基准的,其定位方式与绝对定位相似.都是以中心方向为正方向.

  其宽度百分比也是只以html为基准的.

注:  1.如果没有对父级定位,绝对定位absolute则默认以其第一个定位的祖辈为标准.

  2.绝对定位和相对定位的盒子,其宽度百分比是以第一个定位祖辈为基准的;默认的是以body为基准的

  

HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点的更多相关文章

  1. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  2. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  3. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  4. 三种定位+堆叠+li小黑点变图片

    定位: 定位分为三种: position:static(默认值) relation(相对定位):进行较小偏移,不会脱离文档流,原位置保留 absolute(绝对定位):脱离文档流,不占据页面空间,变成 ...

  5. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  6. [教程]Delphi 中三种回调函数形式解析

    Delphi 支持三种形式的回调函数 全局函数这种方式几乎是所有的语言都支持的,类的静态函数也可以归为此类,它保存的只是一个函数的代码起始地址指针( Pointer ).在 Delphi 中声明一般为 ...

  7. 【转】ZYNQ中三种实现GPIO的方式

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/husipeng86/article/det ...

  8. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  9. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

随机推荐

  1. lpc1768的系统时钟

    #define XTAL_FREQ   12000000 #define VECT_TAB_OFFSET  0x0000 void SystemInit(void) { //PLL0时钟配置 LPC_ ...

  2. JDBC连接数据库以及简单的操作

    package com.zhiyuan.jdbc.util; import java.sql.Connection;import java.sql.DriverManager;import java. ...

  3. Selenium2+Python:Webdriver API速记手册

    由于web自动化常常需要控制浏览器行为和操作页面元素,相关函数又比较多,于是再此记下一份Webdriver API查阅文档以备不时之需. 参考:虫师<Selenium2自动化测试实战>,和 ...

  4. violin 结构介绍

    参考:http://www.iqiyi.com/w_19rt9yvv9p.html 主要结构有:琴身.指板.腮托.琴马.琴弦.琴轴

  5. codeforces 755D. PolandBall and Polygon

    D. PolandBall and Polygon time limit per test 4 seconds memory limit per test 256 megabytes input st ...

  6. systemd-journal[825]: Forwarding to syslog missed 99 messages

    In this particular case we have a DNS server running Bind which is logging all DNS queries. 7124 mes ...

  7. 如何使用PDO查询Mysql来避免SQL注入风险?ThinkPHP 3.1中的SQL注入漏洞分析!

    当我们使用传统的 mysql_connect .mysql_query方法来连接查询数据库时,如果过滤不严,就有SQL注入风险,导致网站被攻击,失去控制.虽然可以用mysql_real_escape_ ...

  8. CSS BUG 总结

    1.IE7 容器使用了滚动条  其子元素中使用 position:relative ,position变成了fixed,从而不随容器的滚动条滚动; 解决: 在其容器元素的属性中也加入 position ...

  9. ubuntu vi编辑insert时上下左右建为ABCD

    ubuntu  在vi编辑insert时上下左右建不能移动光标而是输出ABCD,backspace也不能起删除作用, 开始我退出insert模式就能够移动和删除了,不过这样太麻烦很不适应, 只要一次执 ...

  10. Eclipse 打开文件所在文件夹

    右击文件 > Show In > System Explorer