一. CSS position 属性介绍

CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。

二. position: static

static：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。

所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。

三. position: fixed

fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。

窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。

四. position: relative

reletive：元素相对其自己正常位置定位，元素在正常的文档流中。

没有设置left和top时的正常位置。

设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。

五. position: absolute

absolute：元素绝对定位，相对于static定位以外的第一个父元素，元素脱离文档流。

所以会找到static定位以外的第一个父元素，因为span的父元素content和container都没有设置position属性，默认为static，找到的第一个父元素就为html<body>，相对于<body>向左移动100px。

如果对content或container设置position属性为relative，absolute或fixed，span会相对于content或container来定位。
以下是三个例子，

span元素的第一个position属性不为static的父元素是content，所以相对于content向左移动10px。

当content属性设置为fixed时，span元素相对于content向左移动10px。

span元素第一个position属性不为static的父元素是container，所以相对于container向左移动10px。

六. 总结

position: static，元素出现在正常的流中，无法通过left，right，top和bottom设置元素定位。
position: fixed，元素脱离文档流，相对于浏览器窗口定位不变。
position: relative，元素出现在正常的流中，相对于其正常位置定位。
position: absolute，元素脱离文档流，相对于static以外的第一个父元素定位。

理解了position的属性，可以更好的设计页面和实现页面。

[CSS]CSS Position 详解的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. CSS中position详解与常见应用实现

    在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...

  3. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  4. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  5. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  6. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  7. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  8. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  9. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...

  10. CSS定位之position详解

    position属性 在前端中,position是很常见的属性.通过这个属性可以调整dom元素在浏览器中显示的位置. 它有几个常用的属性: static 默认值.通常是在覆盖absolute或者rel ...

随机推荐

  1. mysql绿色版安装及授权连接

    --安装包官网下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads --安装教程参见:https://www.cnblogs.co ...

  2. [LC] 1007. Minimum Domino Rotations For Equal Row

    In a row of dominoes, A[i] and B[i] represent the top and bottom halves of the i-th domino.  (A domi ...

  3. kubernetes flannel 网卡绑定错误，故障排查

    kubernetes 新加了个node,状态Ready,但调度过去的任务,都执行异常 查看异常节点日志 `Error adding net work: open run/flannel/subnet. ...

  4. 如何回收VCSA 6自带的vPostgres数据库空间

    最近有学生连续反应由于VCSA磁盘空间满了,导致服务无法正常启动,寻求压缩数据库空间的问题.首先说下,VCSA的数据库是没办法图形界面管理的, 它的内置vPostgres数据库的管理只能通过命令行来完 ...

  5. EmguCV常用函数总结

    Emgucv常用函数总结: 读取图片 Mat SCr = new Mat(Form1.Path, Emgu.CV.CvEnum.LoadImageType.AnyColor); //根据路径创建指定的 ...

  6. linux系统--C语言程序开发的基本步骤（包含gcc的基本步骤）

    1.使用vi或者vim编写程序文件 2.使用gcc把所有的源文件翻译成计算机认识的格式(编译) 3.使用./a.out作为命令执行得到的可执行文件 gcc编译器的工作步骤: 1.处理所有的预处理指令 ...

  7. android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码

    Android精选源码 一个爬取美女图片的app Android高仿抖音 android一个可以上拉下滑的Ui效果 android用shape方式实现样式源码 一款Android上的新浪微博第三方轻量 ...

  8. Java 9 新特性 – 内部类的方块操作符

    方块操作符 ( <> ) 在 Java 7 中就引入了,目的是为了使代码更可读. 但是呢,这个操作符一直不能在匿名内部类中使用 Java 9 修正了这个问题,就是可以在匿名内部类中使用方块 ...

  9. echart封装，前端简单路由，图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  10. scatter散点图

    import matplotlib.pyplot as plt import numpy as np n = 1024 X = np.random.normal(0,1,n) Y = np.rando ...