position的四种定位方式:static、fixed、relative、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%;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的更多相关文章
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- CSS布局的四种定位方式
1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- CSS的4种定位方式比较
CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...
- HttpwebClient的四种请求方式
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷. 本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...
- xml常用四种解析方式优缺点的分析×××××
xml常用四种解析方式优缺点的分析 博客分类: xml 最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...
- list的四种遍历方式
1.手先增强for循环和iterator遍历的效果是一样的,也就说 增强for循环的内部也就是调用iteratoer实现的,但是增强for循环 有些缺点,例如不能在增强循环里动态的删除集合内容.不能获 ...
随机推荐
- intellij-添加文档注释模板
file-->setting-->Editor-->File and Code Templates-->FileHeader
- python3 第十五章 - 数据类型之Sets(集合)
python的官网里对集合的描述是: Python also includes a data type for sets. A set is an unordered collection with ...
- python3 第三章 - 程序的基本结构
1.编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: cp-1252 -* ...
- input标签(待填坑)
input标签几种属性值 button:用作定义按钮 checkbox:定义复选框 file:供文件上传 hidden:定义隐藏的输入字段 image:图像形式的提交按钮 password:密码字段 ...
- Shell 批量复制文件名相近的文件到指定文件名中
问题: 目录结构如下: test/ 2001.01.01/ 2001.02.02/ 2001.03.02/ 2001.01.03/ 2001.02.04/ 2001.03.05/ 2 ...
- iOS 设置文本中指定某段文本的颜色 大小
NSString *money = @"300"; NSString *perStr = @"元/时"; NSString *text = [NSString ...
- Asp.net mvc 中View 的呈现(二)
[toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...
- 深入浅出Hadoop之HDFS
hadoop生态系统一直是大数据灵域的热点,其中包括今天要聊的HDFS,和计划以后想聊的yarn, mapreduce, spark, hive, hbase, 已经聊过的zookeeper,等等. ...
- Python学习笔记(二):字典
字典由多个键及与其对应的值构成的键值对构成,字典中键唯一,值不唯一. 1)dict 函数: >>>items=[('name','lilei'),('age',12)] >&g ...
- BZOJ 3265: 志愿者招募加强版 [单纯形法]
传送门 一个人多段区间,一样.... 不过国家队论文上说这道题好像不能保证整数解.... #include <iostream> #include <cstdio> #incl ...