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

一、定位分类:

a、静态定位  position:static;    :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性)。

b、相对定位  position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来。

c、绝对定位  position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不会被保留,周边元素将会占据它原来的空间。

d、固定定位  position:fixed;:元素从文档流中脱离出来,但是他们是相对于浏览器(视口)产生的位置的改变。目前有些浏览器不支持该种定位方式。

注:对于被设置为静态或相对定位的非根元素,容器块是它最近的块级元素、表格单元的内容区的边缘。

  对绝对定位的非根元素,容器块是它最近的不是静态定位的祖先元素(即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;)

二、position  的属性:

当一个元素的position 定位类型一旦被确定后,它有四个偏移属性:top  right  bottom left  (四个属性的值可以设置为:长度、百分比或者auto;)

a、相对定位:position:relative;

(top right bottom left )相对于它们在文档流中的初使位置进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中所占据的原始空间被保留;

可能会覆盖其它元素;

当设置为相对定位时,使层位置产生偏移,但并不影响文本流中接下来其它层的位置;

当设置为相对定位时,层的层叠级别高于文本流的级别(即优先顺序是越靠近越产生影响);

当两个元素设置为相对定位时,同等级别下会按照文本流的顺序层叠显示。

.a {position:relative;top:100px;left:100px;}

b、绝对定位:position:absolute;

(top right bottom left )相对于容器块边缘(包括margin值)进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中占据的原始空间不被保留;

当设置为绝对定位时,该层将从文档流中脱离,以该层所在的容器块的坐标原点为参考进行偏移,不会对其它元素产生任何影响;

注意:当容器块没有设置position属性或者position属性为static时候,将以body或html的坐标原点为参考。

.b {position:absolute;top:100px;left:100px;}

注意:建议文档流中慎用position属性,尽量使用float属性来对文档流相关元素进行定位!!!

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

  1. CSS中的定位与浮动

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

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

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

  3. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  7. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

  8. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  9. 浅谈CSS中的定位知识

    1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如 ...

随机推荐

  1. c++ primer plus 习题答案(7)

    p427.4 //头文件: #include<iostream> #ifndef STACK_H_ #define STACK_H_ typedef unsigned long Item; ...

  2. poj 1410 计算几何

    /** 注意: 千万得小心..就因为一个分号,调了一个晚上... **/ #include <iostream> #include <algorithm> using name ...

  3. 12,C++中 .* 可以出现在什么地方?有何作用?

    .*运算符表示什么意思?好几次遇到.*,但不知道如何使用.后来发现,可以体现在成员函数指针的调用上. 1,函数指针指向公有非静态的成员函数.此时,必须创建一个对象来调用函数指针. class Cont ...

  4. S70卡

    产品名称:Mifare 4K(S70)卡 芯片类型:Philips Mifare 1 S70(MOA2) 存储容量:32Kbit,32个分区,每分区两组密码   工作频率:13.56 MHz   通讯 ...

  5. php扩展类开发实例

    class Vector2D { private $_x; private $_y; /** * Constructor. */ public function __construct($x = 0, ...

  6. COM编程之IUnknown接口

    COM组件其实是一种特殊的类,遵循一个统一的标准,使到各个软件都可以通过某种方法访问这个类的函数和方法,也就可以做到组件通用. com就是统一的标准--通过接口来调用com组件.接口是你的com组件能 ...

  7. HDU 4931 Happy Three Friends

    #include <cstdio> #include <algorithm> using namespace std; int p1,p2,a[6],T; int main() ...

  8. python字符串格式化符号含义及转义字符含义

    字符串格式化符号含义    符   号    说     明      %c    格式化字符及其ASCII码      %s    格式化字符串      %d    格式化整数      %o   ...

  9. ThinkPHP第十天(_initialize方法,SESSION销毁,分组配置,include文件引入,JOIN用法)

    1.Action类中的_initialize()函数,先于任何自定义操作函数运行,可认为是控制器的前置操作.可用于检测用户是否登录等检测. 如果多个模块(Action)需要相同_initialize( ...

  10. Python学习之路——socket

    一.Socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信. socket服务端示例: import socke ...