• static: HTML元素的默认定位方式
  • absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
  • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

记住如下的口诀

  • 绝对定位（absolute）位置是相对最近已经定位的父元素，如果父元素本身没有使用position定位，则相对于文档（html）定位
  • 绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数

CSS中position的absolute和relative用法的更多相关文章

  1. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  5. CSS中Position属性static、absolute、fixed、relative

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

  6. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  9. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

随机推荐

  1. EntityFramework 学习 一 Entity Lifecycle 实体生命周期

    当我们执行CRUD(Create,Read,Update,Delete)操作之前,最重要的是搞明白实体的生命周期和EntityFrameword怎么管理实体 在一个实体的生命周期里,每个实体都有一个实 ...

  2. C# 中获取CPU序列号/网卡mac地址

    1.cpu序列号2.mac序列号3.硬盘id在给软件加序列号时这三个应该是最有用的,可以实现序列号和机器绑定,对保护软件很有好处.哈哈.   using System; using System.Ma ...

  3. Java强引用、 软引用、 弱引用、虚引用

    Java强引用. 软引用. 弱引用.虚引用 2012-07-09     1.对象的强.软.弱和虚引用    在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也 ...

  4. Oracle数据库操作语言（DML）

    --insert添加语句 insert into table_name(column_name,column_name,...) values (data1,data2,...); --通过表添加数据 ...

  5. Windows下控制Nginx的状态

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...

  6. python第七篇：Python 列表操作详解

    Python列表操作详解 list函数 list()   #生成一个空的列表 list(iterable)  #用可迭代对象初始化一个列表 列表的 and 运算和 or 运算 列表and运算 > ...

  7. php.ini中的session配置说明

    下面介绍能让session运行的必要配置步骤 手动配置PHP运行环境时,最容易遗忘的一项是服务器端session文件的存储目录配置工作,打开php.ini文件,搜索Session,找到session. ...

  8. js文件报错Syntax error on token "Invalid Regular Expression Options", no accurate correction

    Syntax error on token "Invalid Regular Expression Options", no accurate correction 1.选中报错的 ...

  9. Web中常用字体介绍

    1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...

  10. Java中的泛型、枚举和注解

    1.泛型: 一.为什么要有泛型(Generic)?1.解决元素存储的安全性问题任何类型都可以添加到集合中:类型不安全2.解决获取数据元素时,需要类型强转的问题读取出来的对象需要强转:繁琐可能有Clas ...