css中的position属性值的探究
css的position属性指定了元素的定位类型，然后通过top，botton，left，right来具体定位。
在具体定位之前必须使用position属性，否则所有的具体定位属性都无法生效。
position可选择的值一共五个：static ，relative，absolute，fixed，或sticky。
下面博主将一一进行含代码和运行结果的对比解释
首先是不设置position属性，可以看到two元素的top的属性并未生效，而颜色属性是有效的，当前位置是默认文档流中的位置，以此为原型对比position改变时的元素位置的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./j.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
.box {
display: inline-block;
background: red;
color: white;
}
#two {
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
position：static
在#two的类下添加position：static;如下（后面每处只修改position的值）
#two {
position:static;
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
这个值既然会使定位属性失效，那么它存在的意义是什么的？
在网页样式修改的过程中，可以暂时的屏蔽某些元素的位置信息，或者在修改的时候，保留，某些部分的位置信息，便于恢复。
position：relative
相对定位，相对与原来正常文档流的位置定位，但是在定位时不改变原来的页面布局，既是相当于只是把定位的元素进行了移动，而移动的对比标准位置就是正常文档流中的位置，而原来的位置会留白。
position ：absolute
绝对定位，该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。他相对于最近已定位的父元素定位。例子中即是根据body元素来定位的。
position ：fixed
固定定位，所谓固定定位和绝对定位相似，一样都会从普通文档流中删除，并且不会为页面布局中的元素创建空间；不一样的是它是固定在视窗上的，是以视窗为定位对象的的，相信大家浏览很多网页时都有这样的感受，网页上部或者下部会有广告不会随着网页的上下滚动而移动，它们是固定在网页上的，并且如果没有设置z-index来修该叠放次序，它们会覆盖网页的内容。
position ：sticky
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 20px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的父元素，如果父元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
css中的position属性值的探究的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中关于position属性的探究（原创）
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
- css中background-size的属性值
length 设置背景图像的高度和宽度. 第一个值设置宽度,第二个值设置高度. 如果只设置一个值,则第二个值会被设置为 "auto". percentage 以父元素的百分比来设置 ...
随机推荐
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- DOM结构及优化
1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...
- Linux下的JDK和OpenJDK有什么具体的区别
OpenJDK是JDK的开放原始码版本,以GPL(General Public License)协议的形式放出(题主提到的open就是指的开源).在JDK7的时候,OpenJDK已经作为JDK7的 ...
- Codeforces 841 D - Leha and another game about graph
D - Leha and another game about graph 思路:首先,如果所有点的度数加起来是奇数,且没有-1,那么是不可以的. 其他情况都可以构造,我们先dfs出一个生成树,然后从 ...
- Tqdm 进度条可视化模块
2018-12-04 14:34:25 使用python Tqdm进度条库让你的python进度可视化 Tqdm在阿拉伯语表示进步,在西班牙语中表示我非常爱你.是一个快速,可扩展的Python进度条, ...
- 下一个更大的数 Next Greater Element
2018-09-24 21:52:38 一.Next Greater Element I 问题描述: 问题求解: 本题只需要将nums2中元素的下一个更大的数通过map保存下来,然后再遍历一遍nums ...
- C# http监听之Nancy.net
通过winform或者是控制台应用程序监听http请求,之前使用的是微软的HttpListener,参考https://www.cnblogs.com/duanjt/p/5566336.html 然后 ...
- LeetCode--409--最长回文串
问题描述: 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: 假设字 ...
- 20171023xlVBA递归统计WORD字数
Dim dFilePath As Object, OneKey Sub main_proc() Dim Wb As Workbook, Sht As Worksheet, Rng As Range S ...
- Agile敏捷开发Planning Poker简介
关注嘉为科技,获取运维新知 一.为什么不用“人天”? 传统的IT项目,尤其是软件开发项目,往往使用“人天”来作为工作量评估的量词.甚至是代表一种评估方式.在软件项目开发经典著作<人月神话&g ...