一、position

一）语法：

　

看了那么久的语法，终于到了讲正题的时间了。

二）定位

1.相对定位：相对元素自己在没有定位之前的位置进行位移，元素仍然保留还没有原来的位置。

特性：

　　1）不脱离文档流；

　　2）不影响元素本身的特性，行内元素是行内元素，块是块元素；

　　3）如果没有给定位的值（top/right/bottom/left），对元素本身没有影响。

2.绝对定位：（一般配合相对定位来使用）相对于已经定位的最接近的祖先元素进行位移。

　　注意：”父相子绝“如果没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是body/html。

　　　　　　　　 以下是的父元素是设置了相对定位；

特性：

　　1）脱离文档流；

　　2）行内元素支持宽高；（类似于float）

　　3）块级元素”撑开“宽高；

　　4）没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是body/htm；

　　5）一般配合”相对定位“使用”父相子绝“；

　　6）不支持margin:auto;

　　7）绝对定位与float浮动不能同时使用；比如：一个大盒子里有用绝对定位或css float浮动定位，则IE6.0则不显示将对象改大的绝对定位或相对定位；

　　8）定义的顺序

 <style>

     div{position: relative;height: 100px;width: 100px;}

     span{position: absolute;height: 50px;width: 50px;top: 10px;left: 10px;}

 </style>

 <body>

     <div>

          <span>ddddd<span>

     </div>

 </body>

　　9）left和right  /top和bottom   在一个对象中只能选一种来定义

　　10）切勿滥用

3.固定定位：可想而知。。。无论怎么移动，它永远都在那里，一直与你同在。。哈哈

参考：http://www.barelyfitz.com/screencast/html-training/css/positioning/

中文：http://blog.jobbole.com/49320/

如果有什么不对的或者要补的地方 可以说出来吗？[可伶.gif]谢谢！[玫瑰.jpg]

一直往前走吧 别想那么多了 还有青春可以耗  ——小晴哥

关于position的更多相关文章

  1. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  5. css知多少（11）——position

    1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...

  6. Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}

    今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...

  7. 函数：MySQL中字符串匹配函数LOCATE和POSITION使用方法

    1. 用法一 LOCATE(substr,str) POSITION(substr IN str) 函数返回子串substr在字符串str中第一次出现的位置.如果子串substr在str中不存在,返回 ...

  8. CSS:position:fixed使用(转)

    position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...

  9. position导致Safari工具栏不自动隐藏

    一般情况下,移动端网页在上滑的时候,Safari的工具栏会自动隐藏掉,下滑的时候又会出现. 但是,如果可滑动区域的最外层box写了position:absolute,就不会自动隐藏了. 例如像这样的页 ...

  10. 元素堆叠问题、z-index、position

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

随机推荐

  1. JS事件及其兼容用法

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 1.事件流:描述的是从页面中接收事件的顺序. IE提出的事件冒泡流:事件开始由最具体的 ...

  2. Qt使用MySQL笔记一

    原始日期:2015-08-20 18:01 今天开发项目时,遇到一个问题,经过自己不断尝试,终于找到了解决办法,于是赶紧记下来,不然过段时间可能又忘了呵呵,从而重蹈覆辙,浪费时间~问题是这样的:在插入 ...

  3. 关于MATLAB处理大数据坐标文件2017527

    第一次提交数据: 今天用了8个特征,加上的这一个特征是 从3000条测试数据中测试失败的数据总结出来的树的数目为50再次使用3000条测试数据测试结果-- 结果不错: 99%但是运行官网数据结果分数- ...

  4. Array.apply(null,{length:20})与new Array(20)的区别

    Array.apply(null,{length:20}) 这句代码的实际意义:创建长度为20的一个数组,但并非空数组. 跟new Array(20)的区别在于,前一种创建方式,得到的数组中的每一个元 ...

  5. php5.6在yum下安装gd库

    yum install php-gd --enablerepo=remi,remi-php56 php.ini配置文件中增加 extension=gd.so 重启web服务器即可

  6. Linux常用操作命令（三）

    查看linux日志某几行 用逆序显示命令tail查看 命令格式:tail [  -r ] [  -n Number ] [ File ] [一]从第3000行开始,显示1000行.即显示3000~39 ...

  7. JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

    前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...

  8. Kafka 源代码分析之LogManager

    这里分析kafka 0.8.2的LogManager logmanager是kafka用来管理log文件的子系统.源代码文件在log目录下. 这里会逐步分析logmanager的源代码.首先看clas ...

  9. linux 小技巧(磁盘空间搜索)

    这里记录一些linux 管理中可能会用到的又容易忘的一些小技巧. linux磁盘写入失败,提示磁盘空间不足.一般都会用df -h 或者df -i看是不是磁盘空间不足或者是inode空间不足.发生这种情 ...

  10. js字符串转换为数字 总结

    a. 将一个字符串转换为数字的一种缺少些技巧但是很清楚明白的方法就是:把Number()构造函数作为一个函数来调用:  var number = Number(string_value); b. pa ...