position详解
导读:
position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位,最后再详细讲解其它取值分别是什么意思。
相对定位和绝对定位
先看看MDN上是怎么解释它们的:
相对定位:相对定位的元素是在文档中的正常位置偏移给定的值,但是不影响其他元素的偏移。
绝对定位:相对定位的元素并未脱离文档流,而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时,绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。
看到这里是不是一脸懵逼呢?大家可以尽量去感悟理解一下,如果实在理解不了也没事,为了更形象地理解relative(相对定位)和absolute(绝对定位),我们先来看一段代码:
HTML:
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
CSS:
.box {display: inline-block;width: 100px;height: 100px;background: red;color: white;
}#two {position: relative;//相对定位top: 20px;left: 20px;background: blue;
}
可以通过Codepen打开尝试:https://codepen.io/sd237720488/pen/oJogNO
相对定位 relative
#two {position: relative;//相对定位top: 20px;left: 20px;background: blue;}
上面代码用的是相对定位,运行结果如下:
我们可以发现,在相对定位relative的情况下:
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。——W3school
Two模块:以原本正常位置为参照,向下、向右偏移了20px。
其它元素(One/Three):均以Two模块正常位置的情况下布局,Two并没有影响其它元素偏移。
绝对定位 absolute
当我们把代码中的position:relative替换成position:absolute,会发生什么呢?
#two {position: absolute;//相对定位top: 20px;left: 20px;background: blue;
}
我们可以发现,在绝对定位absolute的情况下:
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。——W3school
Two模块:因为没有已定位的祖先元素,所以它的位置相对于最初的包含块,向下、向右偏移了20px。
其它元素(One/Three):就像Two不存在一样布局。
固定定位 fixed
#one {position: fixed;top: 80px;left: 10px;
}
"One" 元素固定定位在离页面顶部 80px,离页面左侧 20px 的位置。
粘性定位 sticky
#one {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
以top:10px为临界点,在视图滚动到元素top距离小于10px时,"one"元素为相对定位,超过10px则为固定定位。
sticky为CSS3新增属性。值得注意的是,这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。
转载于:https://www.cnblogs.com/shendan/p/position.html
position详解相关推荐
- Kooboo CMS - Html.FrontHtml.Position 详解
DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...
- CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位. 今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在C ...
- DIV布局之position详解
相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它 ...
- html css position,[CSS]CSS Position 详解
一. CSS position 属性介绍 CSS中position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型.有static,relative,absolute和fixed四种取值 ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- css里面的位置属性,CSS定位属性Position详解
4. position:relative + position:absolute 如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位.如果给 ...
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
- CSS中position详解
一些关于定位和叠加的理解 一.position属性 position有5个值,分别为static,relative,absolute,fixed,sticky. 1.1 static static是p ...
最新文章
- (time.h) 自己用
- Linux第四章自测习题——Linux系列学习笔记
- 1.1.1 从简单的数据类型开始
- 求android 中串口的发送接收数据代码
- 关于有多少个1的计算
- SAP 数据表相关信息
- 后缀数组(bzoj 1031: [JSOI2007]字符加密Cipher)
- injectcheck php_php简单实现sql防注入的方法
- 网络安全技术连载(7)网络安全技术实例分析
- Houdini13:合成
- 诺基亚x6 android one,诺基亚X6手机推送固件更新:提升安卓8.1系统流畅性,新增后台锁定...
- 孕妇php是什么意思,孕妇适合念什么经
- IDEA左侧目录,按照文件夹排序
- 2023年中央民族大学新闻学保研必看上岸前辈复习经验分享
- Python实战技巧(11)使用python收发邮件时需要的邮箱授权码如何获取
- BT源代码学习心得(十三):客户端源代码分析(对等客户的连接建立及其握手协议)
- iPhone 11首发评测:你该不该用它换旧iPhone
- html5 webgl stl,新闻|Babylon.js|Babylon.js教程|Babylon.js开发|Babylon.js制作|webgl|three.js|html53D可视化开发...
- 商品筛选html,js实现简单商品筛选功能
- 可恶的定理,但是却有大用