510，position的值，relative和absolute定位原点是
（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定位原点是的更多相关文章
- 列出display的值，说明他们的作用。position的值， relative和 absolute定位原点是？
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- CSS的position属性：relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...
- 自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
- display值的作用分别是什么？relative和absolute分别是相对谁定位的？
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- 前端~定位属性position（relative、absolute、fixed）的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
随机推荐
- Educational Codeforces Round 81 (Rated for Div. 2) 题解
过了n天补的题解:D AB就不用说了 C. Obtain The String 思路挺简单的,就是贪心,但是直接贪心的复杂度是O(|s|*|t|),会超时,所以需要用到序列自动机 虽然名字很高端但是就 ...
- vlan划分、本征vlan配置、中继
命令部分: vlan划分(全局模式) vlan name v10 no shu no shu switchport access vlan vlan name v20 inter vlan no sh ...
- 转载：openmax bellagio
https://wenku.baidu.com/view/18472c1387c24028915fc3e9.html https://wenku.baidu.com/view/1e380bc20c22 ...
- [USACO08JAN] 手机网络 - 树形dp
经典问题系列 覆盖半径\(1\)的最小点覆盖集 \(f[i][0]\) 表示不在此处建信号塔,但\(i\)及其子树都有信号 \(f[i][1]\) 表示在此处建信号塔,但\(i\)及其子树都有信号 \ ...
- [POI2008] STA-Station - 树形dp
很显然的递推式ans[q] = ans[p] + n - 2*siz[q]; 这么个题你卡我常干嘛,害得我加快读 (谁叫我是vector党呢 #include <bits/stdc++.h> ...
- vue 报错碰到的一些问题及其规范
报错信息:Expected error to be handled(需要处理的错误) 这是因为回调函数里面的参数error没有运用到,所以可以不设置参数,或者在回调函数内console.log(err ...
- java序列化与反序列化的使用
个人博客 地址:http://www.wenhaofan.com/article/20180925214701 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字 ...
- mybatis大于等于小于等于的写法
第一种写法(1): 原符号 < <= > >= & ' " 替换符号 < <= > >= & ' " ...
- AE 打开Shp文件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Ubuntu下vsc+python3配置
我发现直接搜这个很容易得到过时的文章py2请滚蛋好么 1.首先下去VSC官网下载.deb的安装包,安装好vsc,打开后安装PYTHON,reload下.别啊忘记修改路径,setting下搜python ...