在实际项目中,发现postion这个属性经常使用而且常常很重要,所以总结整理一下知识点

css中postion属性有以下可选值,分别是:static,absolute, fixed, relative,inherit

  • postion:static   无定位

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

该属性是所有元素定位的默认情况,在一般情况下,我们不需要特别地去声明它,但有时遇到继承的情况,我们不愿意元素所继承的属性影响本身,从而可以用postion:static取消继承,即还原元素定位的默认值。

  • postion:absolute  绝对定位

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • postion:fixed 相对于窗口的固定位置

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • postion:relative 相对定位

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • postion:inherit

规定应该从父元素继承 position 属性的值。

css的postion属性的更多相关文章

  1. CSS中Position属性

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

  2. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  3. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  4. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  5. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

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

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

  7. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  8. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  9. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

随机推荐

  1. 20165215 2017-2018-2 《Java程序设计》第3周学习总结

    20165215 2017-2018-2 <Java程序设计>第3周学习总结 教材学习内容总结 编程语言历经面向机器语言.面向过程语言.面向对象语言三个发展阶段. 面向对象语言的三个特点: ...

  2. 项目方说性能达到百万TPS,如何测试它的可信度?

    项目方说性能达到百万TPS,如何测试它的可信度? 应用系统性能提升的关键在于运维端的接入管理模型(AAA,认证 Authentication.授权 Authorization.计费 Accountin ...

  3. node.js核心技术

    一.知识结构: http模块:配置简单 的web服务,npm/cnpm工具 express框架:express中间件进行服务配置:路由:请求处理: DB服务:学习使用mysql关系型数据库: web接 ...

  4. JXNU暑期选拔赛

    最小的数 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissi ...

  5. linux 环境RPM 安装MYSQL5.6

    linux 环境RPM 安装MYSQL5.6 系统环境 CentOS7.2 1.关闭selinux 服务[SELinux是一种基于域-类型 模型(domain-type)的强制访问控制(MAC)安全系 ...

  6. NoSql Cassandra

    我们为什么要使用NOSQL非关系数据库? 随着互联网web2.0网站的兴起,非关系型的数据库现在成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.而传统的关系数据库在应付web2.0网站,特别 ...

  7. 如何最快速的找到页面某一元素所绑定的点击事件,并查看js代码

    https://blog.csdn.net/jmd88888888/article/details/70919378

  8. fjwc2019 D2T1 直径 (构造)

    #181. 「2019冬令营提高组」直径 (这题构造题是我考场上唯一一A的题........) 先看这个特殊的Subtask4 Subtask 4(20pts):$\sqrt{1+8k}$​​​ 为整 ...

  9. markdown 换行

    基本语法 basic grammar line break

  10. python base64加解密

    加密字符串 encodestr = base64.b64encode("chenglee1234".encode(encoding='utf-8')) 解密字符串 decodest ...