（absolute：生成绝对定位的元素）

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%;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>

510，position的值，relative和absolute定位原点是的更多相关文章

  1. 列出display的值，说明他们的作用。position的值， relative和 absolute定位原点是？

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

  2. CSS的position属性：relative和absolute

    relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...

  3. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  4. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  5. 一张图看懂css的position里的relative和absolute的区别

    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...

  6. CSS里Postion几个取值relative、absolute、static、fixed的区别和用法

    ---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...

  7. 自制简单表单验证relative与absolute定位

    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...

  8. display值的作用分别是什么？relative和absolute分别是相对谁定位的？

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  9. 前端~定位属性position（relative、absolute、fixed）的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

随机推荐

  1. win10子系统ubuntu内的nginx启动问题

    需用sudo启动,密码是windows密码.

  2. ssm开发垃圾分类查询系统 源码 mysql

    需求 基于SSM实现一个垃圾分类查询管理系统, 用户可以根据自定义查询分类信息, 管理员可以对分类信息, 垃圾详情信息进行增删改查的管理 运行环境 jdk1.8,tomcat8.5,mysql5.6, ...

  3. Windows ThinPC 7 部署后续设置与本地化

    还原注销背景 %system32%\oobe\info\backgrounds 删除该目录下所有文件后变为wes7背景 24时制与非UNICODE字符乱码解决 Control Panel \ Regi ...

  4. 巨杉学习笔记 | SequoiaDB MySQL导入导出工具使用实战

    本文来自社区用户投稿,感谢这位小伙伴的技术分享 巨杉数据库架构简介 巨杉数据库作为分布式数据库是计算和存储分离架构,由数据库实例层和存储引擎层组成的.存储引擎层负责数据库核心功能比如数据读写存储以及分 ...

  5. hyper-v 80070057

    微软官网搜索MediaCreation tool进行升级.

  6. MODBUS TCP/IP协议规范详细介绍

    1．该规范的发展概况                                    原始版本1997年9月3日作为公共评论的草案.     再版1999年3月29日,即修订版1.0.     ...

  7. jvm(n)：JVM面试

    Jvm内存结构,一般是面试官对Java虚拟机这块考察的第一问. Java虚拟机的内存结构一般可以从线程共有和线程私有两部分起头作答,然后再详细说明各自的部分,类似树状结构的作答,好处就是思路清晰,面试 ...

  8. OPGL+VS2017+GLFW+GLEW配置详细步骤

    OPGL+VS2017+GLFW+GLEW配置详细步骤: https://blog.csdn.net/weixin_40921421/article/details/80211813 原博客地址:ht ...

  9. react生命周期方法有哪些？

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

  10. jenkins pipline 几个注意细节

    新建jenkins pipline 1)pipeline的脚本语法要正确,sonarqube的projectKey需要做相应的修改 2)先执行一次构建,会报错 3)进到jenkins workspac ...