在实际项目中,发现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. Java基础整理

    一.Java中的遍历 1.在java开发中会碰到遍历List删除其中多个元素的情况,如果使用一般的for循环以及增强的for循环,代码会抛出异常ConcurrentModificationExcept ...

  2. bzoj3196 二逼平衡树

    题目链接 平衡树系列最后一题 坑啊 10s时间限制跑了9764ms...还是要学一学bit套主席树啦... 经典的线段树套treap...至于第一发为什么要TLE(我不会告诉你treap插入的时候忘了 ...

  3. How to solve the problem that BMW Icom A2 A3 host can’t be connected?

    Aftre the BMW ICOM host is connected to the car via a 16PIN connector, and the other side is connect ...

  4. 直播协议的选择:RTMP vs. HLS

    文章转自:直播协议的选择:RTMP vs. HLS 前言 随着直播业务的兴起,越来越多的直播平台开始涌现,这火热的程度好像一个应用不带上直播业务出来都不好意思跟人打招呼.想要做一个直播业务,主要包括三 ...

  5. sass中的循环判断条件语句

    @if $lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; @mixin inline-b ...

  6. 怎样从外网访问内网Apache HTTP Server

    本地安装了一个Apache HTTP Server,只能在局域网内访问,怎样从外网也能访问到本地的Apache HTTP Server呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

  7. li设置inline-block后,li左边出现空隙问题。

    方法1:在ul设置font-size=0,然后再li再单独设置font-size 方法2:li连着写不要换行,也可以解决. <ul> <li>测试1</li>< ...

  8. 图片上传插件:webuploader

    官网链接:https://github.com/fex-team/webuploader

  9. form 表单中 button 按钮用 return false 阻止默认刷新踩过的一个小坑

    今天在写一个button按钮的事件时,明明在点击事件的最后写了 return false,可是点击按钮页面仍然会自动刷新 最后看到刷新前 控制台有一抹红色一闪而过,由于速度很快,之前一直都注意到 后来 ...

  10. Codeforces 765F Souvenirs - 莫队算法 - 链表 - 线段树

    题目传送门 神速的列车 光速的列车 声速的列车 题目大意 给定一个长度为$n$的序列,$m$次询问区间$[l, r]$内相差最小的两个数的差的绝对值. Solution 1 Mo's Algorith ...