1.普通流:
  • position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。
  • position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位,元素仍保持其未定位前的形状,它原本所占的空间仍保留。

例如:


定位前:

定位后:

可以看出,div1相对于之前的位置,距离top偏移了40px,距离left偏移了60px。

注:top:40px指的是距上偏移40px,而不是向上偏移40px。

2.绝对定位:
  • position : absolute – 将该元素从文档流中删除,原来的占位不再存在,并相对于其最近的已定位祖先元素定位(如果不存在已定位的祖先元素,则相对于其根祖先元素定位,即或<</span>canvas>)。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

例如:


定位前:

定位后:

  • position : fixed – 与absolute 大致相同,只是相对于当前视窗定位(即滚动条滑动时当前元素位置不会随之改变)。

注1:绝对定位的元素不在文档流中,因此会覆盖其他元素。

注2:设置当前元素position : absolute时,应将其父元素position : relative。

3.浮动:
  • l float : left 或float : right –- 将元素从原来的占位中删除,向左或向右漂浮,直到碰到包含块的边框,或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

注:只有在position为static或relative,或继承了父元素的static或relative时,浮动才生效。

浮动场景:

  • 浮动框总体宽度超过容器:浮动框块下移,直到有足够的空间

  • 各浮动框高度不同:下移的浮动框有可能被“卡住”

CSS定位的三种机制:普通流、绝对定位和浮动的更多相关文章

  1. CSS布局的三种机制

    浮动元素之间没有缝隙,这和行内块还是不一样的,有点区别的! 2) 浮动元素与兄弟盒子之间的关系 注意:解决浮动的四种办法,后三种都是针对浮动元素的父元素的.

  2. CSS中的三种基本的定位机制(普通流、定位、浮动)

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  3. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  4. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  8. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  9. 《转载》CSS中的三种样式来源:创作人员、读者和用户代理

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...

随机推荐

  1. Select查询执行顺序

    链接:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语 ...

  2. Sublime3学习笔记

    学习笔记: 学习内容:sublime 3 学习时间:2015-10-20 预计学习时长:1 hour/3 day 学习工具&资料: 官网:http://www.sublimetext.com/ ...

  3. pointers on c (day 1,chapter2)

    交叉编译器(cross complier)就是在一台机器上运行,但它所产生的可执行代码运行在不同类型的机器上. 翻译阶段由几个步骤组成,组成一个程序的每一(有可能有多个)源文件通过编译过程分别转换成目 ...

  4. js直接打印pdf文件内容

    (1)需求:是网页上打开一个pdf文件,然后直接打开打印机,就是直接打印,不用用户再次点击打印按钮,这样用户体验好 (2)经历: 我在网上找了资料就是使用window.print(),但是这个只是打印 ...

  5. Linux CentOS下安装Oracle

    1 .在安装oracle之前首先安装以下组件包,直接输入下列语句安装. yum install binutils* -y yum install compat-lib* -y yum install ...

  6. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

  7. trie字典树详解及应用

    原文链接    http://www.cnblogs.com/freewater/archive/2012/09/11/2680480.html Trie树详解及其应用   一.知识简介        ...

  8. android surfaceView 黑屏

    最近在做一个viewpager + fragment 切换的页面, 其中一个fragment 打开摄像头,需要surfaceView,但是当切换到这个fragment的前一个个时,这个fragment ...

  9. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  10. Unity_Shader(1)

    Shader需要作用在Material中才能起作用. 例子1: (1)创建Shader 将shader替换为以下代码: Shader"MyDir/FirstShader" { Su ...