一.定位--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. 【源码分析】cJSON库学习

    cJSON库是什么? cJSON是一个轻量级的json解析库.使用起来非常简单,整个库非常地简洁,核心功能的实现都在cJSON.c文件,非常适合阅读源代码来学习C语言.最近读完这个库的源码,分享自己收 ...

  2. Xamarin.Android 绑定友盟社会化分享组件

    Xamarin.Android 绑定友盟社会化分享组件 最近在开发博客园Android App的时候需要用到友盟社会化分享组件,在github上搜了一下都没有找到最新版本绑定好的项目,就自己动手来绑定 ...

  3. HTML ——Flex弹性布局

    弹性盒布局的使用 1.为父容器添加display:flex或inline-flex属性 (Webkit内核的浏览器,必须加上-webkit前缀.) 容器默认存在两根轴:主轴(main axis)和交叉 ...

  4. 2017百度web前端实习生在线笔试题

    代码: import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner s ...

  5. Laravel 5.2 教程 - 文件上传

    一.简介 Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包. Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空 ...

  6. mysql导入导出sql文件(包括数据库和数据表的操作)

    废话不多说直接开始. 在windows命令行下登录mysql,创建一个test_01数据库,创建一个user表,并插入一条数据,如下 一.导出数据库test_01 1.退出数据库,在命令行中输入 my ...

  7. Java提高(一)---- HashMap

    阅读博客 1, java提高篇(二三)-----HashMap 这一篇由chenssy发表于2014年1月,是根据JDK1.6的源码讲的. 2,Java类集框架之HashMap(JDK1.8)源码剖析 ...

  8. 与64位版本的Windows不兼容,masm运行不了

    问题: 在Window64位运行不了的masm 解决方法: 1.下载DosBox0.74(当前最新): 2.安装后运行,运行后出现控制台: 3.在DosBox的控制台下运行 Mount x: x:/m ...

  9. c# 操作monogodb的一些简单封装

    public interface IDataBaseCore { } public class BasicData : IDataBaseCore { } public class Filter    ...

  10. [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers

    //又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...