1.绝对定位:

position:sbsolute;

作用:将元素从文档流中拖出来,然后使用 left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

若不存在这样的包含块,则相对于Body元素,即相对于浏览器窗口。

2.相对定位:

position:relative;

作用:通过 left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程,是首先按(static)方式生成一个

元素。并且元素层一样浮动起来,然后相对于以前的位置移动,偏移的方向和幅度由left,right,top,bottom属性确定,偏移前的

位置保留不变。

3.相对定位与绝对定位的组合使用:

参照定位元素必需是相对定位元素的前辈元素。参照定位的元素必需加入position:relative。定位元素加入 position:sbsolute,可以

用top,bottom,left,right进行定位。

HTML文档流解释:
      HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.
      内联是在水平方向上一个拦一个元素排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度.
     块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中,
     内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.
 

hmtl 中的定位的更多相关文章

  1. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  2. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  3. jQuery ZeroClipboard中Flash定位不准确的解决方案

    转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...

  4. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  5. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  6. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  7. MySQL 5.6中如何定位DDL被阻塞的问题

    在上一篇文章<MySQL 5.7中如何定位DDL被阻塞的问题>中,对于DDL被阻塞问题的定位,我们主要是基于MySQL 5.7新引入的performance_schema.metadata ...

  8. MySQL 5.7中如何定位DDL被阻塞的问题

    在上篇文章<MySQL表结构变更,不可不知的Metadata Lock>中,我们介绍了MDL引入的背景,及基本概念,从“道”的层面知道了什么是MDL.下面就从“术”的层面看看如何定位MDL ...

  9. 【基础】selenium中元素定位的常用方法(三)

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

随机推荐

  1. Winform实现右下角弹窗_提示信息

    网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...

  2. RMAN的恢复篇

    Oracle 数据库的恢复实际上包含了两个概念:数据库修复(RESTORE)与数据库恢复(RECOVER): 数据库修复:是指利用备份的数据库文件来替换已经损坏的数据库文件或者将其恢复到一个新的位置. ...

  3. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  4. mac Zip 常用命令

    最通俗的用法 zip -q -r -e -m -o [yourName].zip someThing -q 表示不显示压缩进度状态 -r 表示子目录子文件全部压缩为zip  //这部比较重要,不然的话 ...

  5. Selenium操作页面元素

    转自:http://blog.sina.com.cn/s/blog_6966650401012a7q.html 一.输入框(text field or textarea) //找到输入框元素: Web ...

  6. Java Web基础:JSP基础概念

    JSP介绍 JSP全称是Java Server Pages,它和Servlet都是Sun公司定义的用于开发动态Web资源的技术,它解决了Servlet输出流排版复杂和难以维护的问题.JSP完美融合了H ...

  7. Java过滤器,SpringMVC拦截器之间的一顺序点关系

    由于最近做的项目中有一部分是接口远程调用,用到了接入权限和业务权限的鉴定,需要采用SpringMVC的拦截器,以前用Struts2的时候用过拦截器,而SpringMVC的拦截器功能之前没研究过,所以这 ...

  8. 如果重新设计网络,有没有可能合并IP地址跟MAC地址?

    前阵子看网络基础相关的书籍,冒过一个疑问,为什么要有MAC地址跟IP地址?两者可否合二为一?   现在的逻辑是这样子:在数据传输过程中,路由器查看这个数据包的IP地址,跟路由表中记录的“IP集合:下一 ...

  9. jquery mobile 教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  10. Java中final的作用

    Java中Final可以被用于变量,方法,类.具体来说: 1, Final 变量 修饰主类型时,制定变量为常数,不希望被改变 修饰类类型时,表示变量的句柄不变,不能被指定指向新的变量 修饰参数时,参数 ...