在实际项目中,发现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. Linux基础命令---arping

    arping arping指令用于发送arp请求到一个相邻的主机,在指定网卡上发送arp请求指定地址,源地址使用-s指定.该指令可以直径ping MAC地址,找出哪些地址被哪些电脑使用了. 此命令的适 ...

  2. system call filters failed to install; check the logs and fix your configuration or disable system call filters at your own risk

    elasticsearch启动时遇到的错误 这个是elasticsearch配置文件的问题. 解决办法: 在elasticsearch.yml配置文件中 添加     bootstrap.system ...

  3. Music life

    some songs: you are you are <<你眼中的世界> Trouble I'm In > 1:40 secs 忧桑钢琴曲 < 豆花之歌 The Tru ...

  4. C# Http文件上传下载

    C# Http文件下载公共类(支持断点续传) http://www.cnblogs.com/hayden/archive/2012/04/26/2472815.html C# Http方式下载文件到本 ...

  5. Maven项目启动报错:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

    1.场景 1.1.先确认pom.xml文件已添加mysql依赖: <dependency>    <groupId>mysql</groupId>     < ...

  6. C Language Deep Analyse

    1.记录几个少见的关键字    auto 声明为自动变量,缺省时编译器一般默认为auto    register 声明寄存器变量    volatile 说明变量在程序执行中可被隐含地改变    ex ...

  7. linux下启动多个php,分别监听不同的端口。

    在工作中,我们可能会遇到,服务器集群的搭建. 这个时候,我们不可能,每一台服务器都是lnmp的环境,我们会把nmp分别放在不同的服务器上,不同的服务器负责不同的功能.比如我们下面要说的php 加入ng ...

  8. kafka数据可靠传输

    再说复制Kafka 的复制机制和分区的多副本架构是Kafka 可靠性保证的核心.把消息写入多个副本可以使Kafka 在发生崩愤时仍能保证消息的持久性. Kafka 的主题被分为多个分区,分区是基本的数 ...

  9. amoeba_mysql 读写分离

    环境 amoeba需要java环境,配置:略. MySQL主从配置:略. 基本架构 MySQL主:192.168.31.140 MySQL从:192.168.31.150 MySQL代理:192.16 ...

  10. rabbitmq heartbeat missing with heartbeat = N seconds原因总结

    一直以来,在我们大规模使用rabbitmq的服务端应用中,都没有出现rabbitmq心跳超时而造成的的影响,反倒是在rabbitmq-cpp客户端出现过很多次该问题,一直以为客户端lib实现的问题(不 ...