一.定位--position属性
 1.static:默认值 没有定位--以标准文档流方式显示
 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom)
 3.absolute:绝对定位
 4.fixed:固定定位

二.相对定位元素的规律
 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置
 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响

三.绝对定位-- absolute属性
 1.偏移位置:left right top bottom
 2.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,
   如果没有已近定位的“祖先元素”那么会以为浏览器为基准进行偏移
 3.绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
 4.绝对定位不设置偏移量元素将保持原来的位置,但脱离标准文档流

四.调整元素定位重叠层的上下位置
 1.z-infex属性值:整数默认值为0
 2.设置position属性时z-iindex属性可以设置各元素之间的重叠高低关系
 3.z-index值大的层位于其小的层上方

定位--position属性的更多相关文章

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

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

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

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

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

  4. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  5. 前端定位Position属性四个值

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中. 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身 ...

  6. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. CSS笔记(十)position属性与定位

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...

  8. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  9. CSS 定位相关属性 :position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

随机推荐

  1. Lambda表达式随笔

    1.Lambda表达式是一个匿名函数,其本质其实还是一个函数,因此任何一个Lambda表达式都可以以其它的方式通过普通的函数实现或者代替. 2.Lambda表达式云算符:=>,该运算符读为&qu ...

  2. commitProperties方法

    自定义的组件,如果重写commitProperties方法,那么在该方法内部一定要注意super.commitProperties()的调用.

  3. ubutun 安装php7.1x

    服务器ecs上本来跑了一套nginx+php5.5,由于新项目使用的是laravel5.4,所以不得不把php升级,在此记录下在此安装的过程和遇到的问题,总体来说还算顺利 cd /usr/local/ ...

  4. js倒计时,秒倒计时,天倒计时

    按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...

  5. bzoj3112 [Zjoi2013]防守战线

    正解:线性规划. 直接套单纯形的板子,因为所约束条件都是>=号,且目标函数为最小值,所以考虑对偶转换,转置一下原矩阵就好了. //It is made by wfj_2048~ #include ...

  6. vsftp使用方法与问题解决

    安装环境 OS:Centos 6.4 vsftp:vsftpd-2.2.2-11.el6_3.1.i686.rpm vsftpd配置文件:/etc/vsftpd/vsftpd.conf 一.      ...

  7. TreeSet对非自然顺序元素的排序

    /* 1. 往TreeSet添加元素的时候,如果元素本身具备了自然顺序的特性,那么就按照元素自然顺序的特性进行排序存储. 2. 往TreeSet添加元素的时候,如果元素本身不具备自然顺序的特性,那么该 ...

  8. 【Netty】第一个Netty应用

    一.前言 前面已经学习完了Java NIO的内容,接着来学习Netty,本篇将通过一个简单的应用来了解Netty的使用. 二.Netty应用 2.1 服务端客户端框架图 下图展示了Netty中服务端与 ...

  9. centos下搭建redis集群

    必备的工具: redis-3.0.0.tar redis-3.0.0.gem   (ruby和redis接口) 分析:     首先,集群数需要基数,这里搭建一个简单的redis集群(6个redis实 ...

  10. R的变量类型和常用函数

    一.R的变量类型 也可以说是数据存储方式,有: Vector: 一维阵列 Matrics: 二维阵列,其中所有元素是同一数据类型. factor: 种类变量,可使用levels函数来规定种类变量的各级 ...