position属性用来规定元素的定位类型和方式

①position：static 默认值，没有定位，元素出现在正常的流中；

②position：fixed  固定定位 是相对于浏览器窗口来进行定位；

③position：relative 相对定位  相对于其本身正常位置来进行定位，它原本所占的空间仍保留；

④position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body），此时元素原先在正常

文档流中所占的空间会关闭，就像元素原来不存在一样，绝对定位后会生成一个块级框，而不管它原先在正常流中是何种类型。

选好定位方式后可通过设置 top/right/bottom/left 来设置元素位置，但是对static无用，static定位下是靠margin来移动位置。

注意：当元素设置position：absolute后，再想用 margin：0px auto； 来使元素水平居中是无效的，可进行如下设置：

<style>

    .s1{width:100%;height:100%;background:red;position:relative;}

    .s2{background:yellow;width:300px;height:100px;position:absolute;

        left:50%;margin-left:-150px;//是让元素到其相对定位的父元素左边的距离为该父元素宽度的50%，这时左边边界正好在父元素的中间线上，再左移宽度的一半正好居中，即再设置margin-top:-150px可使其水平居中

         top:50%;margin-top:-50px;//与上述原理相同，设置后可垂直居中}

</style>

<body>

<div class="s1">

<div class="s2">

    水平居中

</div>

</div>

</body>

position的四种定位方式：static、fixed、relative、absolute的更多相关文章

  1. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  2. CSS布局的四种定位方式

    1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...

  3. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  4. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  5. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  6. CSS的4种定位方式比较

    CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...

  7. HttpwebClient的四种请求方式

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.      本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...

  8. xml常用四种解析方式优缺点的分析×××××

    xml常用四种解析方式优缺点的分析 博客分类: xml   最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...

  9. list的四种遍历方式

    1.手先增强for循环和iterator遍历的效果是一样的,也就说 增强for循环的内部也就是调用iteratoer实现的,但是增强for循环 有些缺点,例如不能在增强循环里动态的删除集合内容.不能获 ...

随机推荐

  1. python_开发规范

    对于python有哪些开发规范? 1. 每行代码不超过80字符 2. 不要在逗号, 分号, 冒号前加空格, 应该之后加空格 3. 列表, 索引,切片的左括号前不加空格 4. 比较运算前后 加一个空格 ...

  2. 面试必问的 volatile，你了解多少？

    前言 Java中volatile这个热门的关键字,在面试中经常会被提及,在各种技术交流群中也经常被讨论,但似乎讨论不出一个完美的结果,带着种种疑惑,准备从JVM.C++.汇编的角度重新梳理一遍. vo ...

  3. Android更新主线程UI的两种方式handler与runOnUiThread()

    在android开发过程中,耗时操作我们会放在子线程中去执行,而更新UI是要主线程(也叫做:UI线程)来更新的,自然会遇到如何更新主线程UI的问题.如果在主线程之外的线程中直接更新页面显示常会报错.抛 ...

  4. 【转】GPS网平差

    进行GPS网平差的目的主要有三个: (1)消除由观测量和已知条件中存在的误差所引起的GPS网在几何上的不一致.包括闭合环闭合差不为0:复测基线较差不为0:通过由基线向量所形成的导线,将坐标由一个已知点 ...

  5. NIO笔记---上

    小弟前端时间由于开发个管理系统导致断更了近20天!!马上就要春招了,学习了一下NIO,将笔记记录下,希望和我一样的18届毕业生都能找到满意的公司!! 本文记录了NIO与IO的区别,缓冲区的数据存取,直 ...

  6. Django笔记 manage.py脚本的使用

    1. 管理Django项目 python manage.py startproject projectname # 新建Django project ~~projectname是自己的项目名称 pyt ...

  7. web框架之Django基础

    1. Django的简介 Django是一个由python写成的开放源代码的Web应用框架. Django的目的是使常见的Web开发任务,快速和容易. 2. Django框架的特点 1. 遵循MVC开 ...

  8. python之编码问题

    二进制------>ASCII:只能存英文和拉丁字符.一个字符占用一个字节,8位------------>gb2312:智能6700多个中文, 1980年 gbk1.0:存了2万多字符 1 ...

  9. 获取当前进程（程序）主窗体句柄并设置wpf的父窗体为此句柄

    有时候在c++调用wpf控件的时候,wpf控件想自己显示窗体,但需要设置owner属性.迂回解决办法是设置wpf的window窗体的父窗体为进程的句柄. 1.获取当前进程id int id = Pro ...

  10. CentOS 7.1静默安装11.2.0.3 64位单机数据库软件

    第1章 CentOS 7.1静默安装11.2.0.3 64位单机数据库软件 1.1  安装前的准备工作 1.1.1      软件准备 1.1.2      检查硬件 注意这里的内存应该满足要求,不然 ...