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. Storm集群安装与部署

    准备 1.三台虚拟机 192.168.1.128 Nimbus 192.168.1.131 Supervisor 192.168.1.132 Supervisor 2.JDK1.8 3.Zookeep ...

  2. OpenCv结构和内容

    OpenCv的结构和内容 OpenCv源码组成结构其中包括cv, cvauex, cxcore, highgui, ml这5个模块 CV:图像处理和视觉算法 MLL:统计分类器 HighGui:GUI ...

  3. 安装node.js和npm

    转载自https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345014184 ...

  4. Java NIO 之 Socket Channel

    在Java NIO中用Channel来对程序与进行I/O操作主体的连接关系进行抽象,这些IO主体包括如文件.Socket或其他设备.简而言之,指代了一种与IO操作对象间的连接关系. 按照Channel ...

  5. 小白的.Net Core 2.0 ConsoleApp入门(keng)指南(一)

    一.准备工作 准备工作很简单,甚至可以不用Visual Studio,一只.NET CORE和Runtime即可(你有考虑过世界第一IDE的感受吗) 下载:https://www.microsoft. ...

  6. KVM详情

    KVM介绍 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器 ...

  7. 主备（keepalived+nginx）

    实验环境 系统: centos 6.9 mini 机器名   ip                                   虚拟ip kn1     192.168.126.10 kn2  ...

  8. 跟我一起读postgresql源码(十六)——Executor(查询执行模块之——control节点(下))

    5.ModifyTable节点 先看一个ModifyTable节点的例子: postgres=# explain update test_01 set id = 5 where name = 'xxx ...

  9. 关于document.body.scrollTop与documentElement.scrollTop

    遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...

  10. 深入理解Python字符编码--转

    http://blog.51cto.com/9478652/2057896 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久,你一定遇到过UnicodeEncodeError ...