• 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. matlab查找最临近搜索knnsearch

    Idx = knnsearch(X,Y) finds the nearest neighbor in X for each query point in Y and returns the indic ...

  2. python Tkinter之Button

    Button小部件是一个标准的Tkinter的部件,用于实现各种按钮.按钮可以包含文本或图像,您可以调用Python函数或方法用于每个按钮. Tkinter的按钮被按下时,会自动调用该函数或方法. 该 ...

  3. mysql delete数据时报Error Code 1175

    我们在学校mysql的时候,在更新或者删除数据的时候,会遇到以下错误: Error Code: . You are using safe update mode and you tried to up ...

  4. SSAS——基础

    一.Analysis Services Analysis Services是用于决策支持和BI解决方案的数据引擎.它提供报表和客户端中使用的分析数据. 它可在多用途数据模型中创建高性能查询结构,业务逻 ...

  5. windows 批处理ping ip

    //pingSingleIp ;;@Echo off @for /f "tokens=1-4 delims=." %%i in (ip.txt) do (@ping -w 600 ...

  6. 关于com组件中idl文件的理解

    IDL文件: IDL文件主要定义两大类内容:一是定义接口:二是定义类型库. 定义接口的关键字是interface.每个接口定义前面方括号里面的内容是该接口的属性,最重要的是uuid的定义.该部分经过M ...

  7. linux命令学习笔记（36）：diff 命令

    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方. diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序 ...

  8. 转载 解决Android与服务器交互大容量数据问题

    对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来自服务器的大容量数据,那么就不得不考虑客户的流量问题.本文根据笔者的一个项目实战经验出发,解决 ...

  9. C语言小程序（一）、判断三角型类型

    最近回炉重造C语言,陆续写一些比较短的代码,选择其中的一些贴到这里,都是在Linux下的代码,Windows未测试. 第一个判断三角形的类型,两个浮点型数据不能直接判断相等,为了输入方便一些,自己设置 ...

  10. freeMarker（三）——模板开发指南之数值、类型

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南——数值.类型 1.基本内容 1.1 什么是数值? 正如你 ...