在实际项目中,发现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. 计蒜客---N的-2进制表示

    对于十进制整数N,试求其-2进制表示. 例如,因为  1*1  +  1*-2  +  1*4  +  0*-8  +1*16  +  1*-32  =  -13  ,所以(-13)_10  =  ( ...

  2. 浏览收藏夹 看到了hadoop3.0 的改动

    大数据非常前卫的it网站   https://www.iteblog.com/archives/tag/hadoop/ 1.多个服务的默认端口被改变 在此之前,多个Hadoop服务的默认端口都属于Li ...

  3. 如何使用Wisdom RESTClient定制满足您个性化需求的API文档?

    Wisdom RESTClient 支持自动化测试RESTful API,输出精美的测试报告,生成精美的RESTful API文档. 这里介绍一下如何定制个性化的RESTful API文档. 定制个性 ...

  4. django后台管理--添加自定义action

    管理员动作 简单来说,Django管理员的基本工作流程是“选择一个对象,然后进行更改”.这对大多数用例都很有效. 然而当你一次性要对多个对象做相同的改变,这个流程是非常的单调乏味的. 在这些情况下,D ...

  5. spring Boot(十九):使用Spring Boot Actuator监控应用

    spring Boot(十九):使用Spring Boot Actuator监控应用 微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台 ...

  6. Kali系列之multi/handler(渗透win7)

    环境 靶机 192.168.137.133 kali 192.168.137.135 步骤+ 生成后门 msfvenom -p windows/meterpreter/reverse_tcp LHOS ...

  7. 基础_模型迁移_CBIR_augmentation

    在之前我们做过这样的研究:5图分类CBIR问题 各不相同的 5类的图形,每类100张 import numpy as npfrom keras.datasets import mnistimport  ...

  8. java的MVC与C#

    Views: @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @{ ViewBag.Title = "Index" ...

  9. Junit Framework -TestRule,自动化测试中如何再次运行失败的测试用例

    有时由于服务器,浏览器等问题,会导致自动化测试用例运行失败,此处通过案例讲解如何使用Junit框架中的TestRule来实现重复运行失败的测试用例. 首先定义一个类并让它实现TestRule,代码如下 ...

  10. ODAC(V9.5.15) 学习笔记(三)TOraSession(2)

    2. 事务相关 名称 类型 说明 AutoCommit Boolean 是否自动提交事务 注意:只有当TOraSession和TOraQuery的AutoCommit都为True时才对每个数据库操作自 ...