fixed 生成固定定位的元素，相对于浏览器窗口进行定位（老IE不支持），元素的位置通 过"left", "top", "right" 以及 "bottom" 属性进行规定。...relative 生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。...static 默认值，没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者z-index 声明）。...inherit规定应该从父元素继承 position 属性的值。 sticky的使用 粘性定位可以被认为是相对定位和固定定位的混合。...#sticky-nav { position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 粘性定位为什么不起作用
CSS中的定位详解及扩展 定位分类 静态定位（static） 相对定位（relative） 绝对定位（absolute） 固定定位（fixed） 粘性定位（sticky） 定位的叠放次序（z-index...二、相对定位（relative） 语法： 选择器 { position: relative; } 含义：采用相对定位后元素的位置以它的初始位置（原来的位置）作为参照物进行定位的。...五、粘性定位（sticky） 语法： 选择器 { position: sticky; top: 5px; } 含义：粘性定位可以被认为是相对定位和固定定位的混合。...特点： 粘性定位以浏览器的可视窗口为参照点移动元素。 粘性定位的元素会占有原先的位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...粘性定位的兼容性差。 应用场景：顶部通栏的固定。 六、定位的叠放次序（z-index） 语法： 选择器 { z-index: 1; } 在使用定位进行布局的时候，可能会出现盒子重叠的情况。
前言 「吸附效果」就是网页滚到到某个位置，元素固定在该位置，后续不随网页滚动而滚动。吸附效果很常见，譬如吸顶效果和吸底效果，经常用在跟随导航、移动广告和悬浮提示等场景中。...它们都有着共通的实现原理：监听scroll事件，判断scrollTop和目标元素的位置范围，符合条件则将目标元素的position声明为fixed，令目标元素相对于浏览器窗口进行定位，让用户看上去就像钉在浏览器指定位置上...「粘性定位」是相对定位和固定定位的合体，元素在特定阈值跨越前为相对定位，跨越后为固定定位。 主要是为了推广知识点，直接上代码，样式就不细磨了，将就看吧。...可点击「阅读原文」查看本文的源码与效果。 注意 粘性定位的参照物并不一定是position:fixed。...当离目标元素最近的祖先元素声明了position:relative|absolute|fixed|sticky，目标元素就相对该祖先元素进行粘性定位。
相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性： 1....移动的出发点是自身标准流的位置 2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在 灵魂永驻） 3. 可以盖在标准流的上方 4....一般用于微调元素和配合绝对定位来实现效果 绝对定位 position:absolute; 特性： 1.移动的出发点： 从绝对元素开始一直往上级找（直到找到最大的html标签），在这个过程中，...移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标，不占有位置 可以 相对于定位的父级移动位置...固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置 z-index 控制“定位”元素的叠放层级 z-index只针对定位元素有效果 z-index值越大，层级越高 如果父元素已经比较过层级了
(粘性定位) 相对定位 relative 相对定位即可控制DOM相对于自己原来位置进行定位 可通过如 left: 50px 如此来调节 绝对位置 absolute absolute的特性是不会为此元素预留空间...，即原本DOM元素下方的元素会向上占住原本DOM元素的位置，类似于网页新开了一个图层的效果。...absolute的定位是以相对于元素最近的非static定位祖先元素的偏移来确定元素位置。...可以利用如 right:50px 等来调节位置 粘性定位 sticky 这个简单说就是当页面下拉到DOM元素到达了设定的位置，DOM元素将不会再随下拉移动，效果如页面内图片 顺便一提，如前面所说，网页存在类似图层一说...，具体图层的上下关系往往通过 z-index 来表示 z-index 越大元素越在上层
static 和 relative 会保留它们在文档流中的自然空间，而 absolute 和 fixed 则不会 —— 它们的空间被移除而且具有浮动行为。...在第一个例子中，大家很容易就能看明白 当视口到达定义的位置时，元素会被粘住。 例： ? 但问题是，它有时候能用，而有时却不起作用。 当它工作时，元素会粘住，但在滚动到其他部分，它会停止粘贴。...粘性容器 —— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。 当你定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！...我来解释一下： 相对（或静态）—— 粘性定位元素类似于相对和静态位置，因为它保留了 DOM 中的自然间隙（留在流中）。...这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时，元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。
，元素的位置是相对其原本位置进行偏移，其不脱离文档流，对于top、bottom、left、right、z-index属性的设置有效，设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块...，如果元素没有已定位的父元素，那么它的位置相对于，通常的使用方案是在外层嵌套一层relative相对定位元素作为父元素，再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移，...relative; } .t4{ position: absolute; top: 100px; } fixed fixed是固定定位，元素的位置相对于浏览器窗口是固定位置...，元素的位置是基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position...、right、bottom、left其中之一，必须通过指定top、right、bottom、left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
相对于页面居中的另一种写法 #login{ width:300px; height:200px; background:green; position:absolute; top:50%;...关于position position:relative ,position:absolute可以自动激活z-index , 如果没有定义position:relative ,position:absolute...及时添加了z-index属性也不起作用 position:relative 是相对于自己在z-index=0的位置，position:absolute是相对于自己最近的设置了position:relative...或者position:absolute的父元素的位置 关于z-index z-index为负值的时候，javascript将不起作用 一个站点的css结构建议采用 base.css...+common.css+page.css的模式 其中base.css 定义CSS reset 以及一些原子类 common.css 可以定义页面的框架 page.css可以定义具体页面中的布局
这意味着，可以创建不干扰页面上其他元素的位置的隔离的 UI 功能，如弹出信息框和控制菜单，翻转面板，可以在页面上任何地方拖放的 UI 功能等。...同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。...可以改变定位上下文 —— 绝对定位的元素的相对位置元素。...默认情况下，定位元素都具有 z-index 属性为 auto 实际值为 0。...https://codepen.io/cellinlab/pen/dydgwGp # 粘性定位 position: sticky，基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样
，定位元素相对于其父元素右边线的距离 相对定位 是元素在移动位置的时候，相对于原来的位置来说的 选择器{position：relative；} 绝对定位 在移动的时候，相对于它的祖先元素来说的 选择器...{position：absolute；} 三个特点： 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位 如果祖先元素有定位，则以最近一级有定位祖先元素为参考点移动位置 绝对定位不占有原先的位置...：先left:50%;，再让固定定位的盒子margin-left:版心宽度的一半； 粘性定位 滑到某个位置时，盒子固定 position:sticky; top:10px; 特点： 以浏览器可视窗口为参照点移动元素...粘性定位占有原先的位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index的值来确定哪个靠上面 数值越大，盒子越靠上，可正可负 {z-index:2;} 绝对定位的盒子居中 加了绝对定位的盒子不能通过...margin来居中 水平 先走父元素宽度的一半 在往左走定位盒子的宽度的一半 垂直 高度的一半 往下走盒子高度的一半 扩展 特性 行内元素加绝对或者固定定位，可直接设置高度和宽度 块级元素加绝对或固定定位
它是一种内容可寻址的对等超媒体分发协议可以让网络更快、更安全、更开放。它是一个面向全球的、是一个点对点的分布式版本文件系统，试图将所有具有相同文件系统的计算设备连接在一起。...在IPFS节点网络性能目前并不乐观的情况下，尝试去寻找能实现具有商业级别能力IPFS应用的过渡方案。...数据: [kdo55fe9ht.png] PS： 关于Demo这块，后续会另外新开一篇实战文章【应用】基于IPFS和GeoHash构建具有地理位置价值服务的DDApp（实战篇）来做专门介绍，让大家也能自己动手编写一个功能相对完善...物联网结合： 充电桩，ETC这些具有支付属性、位置属性的智能设备创新等等。...IPFS-Geo 意义：是一个具有地理位置特征的IPFS智能对象，其元数据具备Geo相关特性，支持千万级别空间数据的快速索引，对象内还提供LBS相关功能的接口服务。
使用- 静态定位static> 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移- 相对定位relative>元素在移动时会以自己原来的位置移动； 原来在标准流中的位置还保留,后面的盒子以标准流对待它...(不脱标)- 绝对定位absolute> 绝对定位是元素在移动位置的时候，是相对于它祖先元素移动； > 如果没有祖先元素或祖先元素没有定位，则以浏览器为准对齐 > 如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置...； > 觉得定位不占用原来标准流的位置，即脱标- **子绝父相**：>子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；- 固定定位fixed> 以浏览器的可视窗口为准移动元素...> 与父元素没有任何关系> 不随着滚动条的滚动而滚动> 不占用标准流的位置，是一种特殊的绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位的混合> 已可视窗口为参考点> 占有标准流位置...auto,属性为数字，可以有负值，但没有单位>当都没有z-index属性，按照属性叠放,后来居上- 绝对定位盒子居中： > left和top 设置 父元素宽度50% > margin-left和margin-top
静态定位在布局时很少用到. 2.相对定位 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位和固定定位的混合 语法: 选择器 { position : sticky ; } 以浏览器的可视窗口为参照点移动像素(固定定位特点...) 粘性定位占有原先的位置(相对定位特点) 必须添加top/left/right/bottom其中一个才有效....定位总结: 定位叠放次序: z-index 在使用定位布局时,可能会出现盒子重叠的情况.此时,可以使用z-index来控制盒子的前后次序....数字后面不能加单位 只有定位的盒子才有z-index属性. 绝对定位的盒子居中 想要实现绝对定位盒子的居中,想要用原来的margin:auto是会失效的(相对定位是可以的!!!)
,属性都无效 Position除了static属性外，，还有 relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative...(相对定位) 使用relative(相对定位) 来实现 relative在默认的文档流布局下，进行偏移 .first { position: relative; left: 50px;...，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。...的大小和代码先后顺序导致 1、默认非static元素的z-index都为0 2、z-index越大，则越在最上面，离观察者越近 3、同样的z-index，在HTML的元素越靠后，则越在最上面 1-5 sticky...(粘性定位) 当页面滑动到相应位置时，该段文字或图片，会随着页面滑动而滑动 h1 { position: sticky; color: yellowgreen; top: 50px
没有定位，元素出现在正常的流中 relative ： 相对定位 fixed ： 固定定位 absolute ： 绝对定位 sticky ： 粘性定位 用法 static 正常的布局行为，即元素在文档常规流中当前的布局位置...此时top, right, bottom, left和 z-index 属性无效。...static relative 相对定位 元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。...relative fixed 固定定位 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。...absolute.gif sticky 粘性定位 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。...ele.classList.toggle('class-name'); 二、将元素添加至指定的DOM元素内的末尾 将 ele 元素添加至 target 元素内的末尾 target.appendChild...(ele); 三、添加和移除事件 1、使用 ON 属性添加事件（不推荐） 你可以在 dom 元素使用 on{eventName} 的属性，eventName 代表事件名，代码如下： ele.onclick...四、计算鼠标在元素内的相对位置 要计算鼠标点击事件，鼠标在元素内的相对位置，我们需要用到 getBoundingClientRect() 这个关键的方法，示例代码如下： ele.addEventListener...1分钟学会 2 个复制文本到剪贴板的方法 1分钟学会如何用 JS 计算文本的宽度 1分钟学会个通用妙招，让你知道用户看了啥 1分钟用 CSS + HTML 实现个按字母吸附滑动的列表（类似手机通讯录列表
比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。...2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。...3、absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。...可通过z-index进行层次分级。 4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。...下面对应用的较多的relative和absolute进行分析 比较重要的一点是: relative是相对于自身位置进行定位， absolute是相对于static定位以外的第一个父元素进行定位，包括
：static;} 静态定位就是按照标准流特性摆放位置，没有位偏移 静态定位很少使用 relative 相对定位 相对定位是元素在移动位置时，是相对于原本的位置来说的 语法： 选择器{ position...：relative;} 它是相对于自己原本的位置进行移动 它在移动之后，在标准流中仍旧占有原本的位置（即移动之后，原本位置仍旧保留，其他标准流无法占用该位置） 它在移动之后，在其他位置时，属于覆盖在其他盒子之上...（sticky） 粘性定位可以认为使相对定位和固定定位的混合 语法： 选择器{position：sticky；} 以浏览器的可视窗口为参照点移动元素（固定定位特点） 粘性定位占有原先的位置（相对定位特点...，我们需要z-index来设置叠放权重 语法： 选择器{z-index：n；} 数值可以是正整数，负整数和0，默认为auto，值越大，权重越大 如果属性相同，则按照书写顺序，后来者居上 数字后面不能加单位...-- 我们给出三个盒子，分别设置定位和z-index，可以清楚看出z-index效果 --> div { position: absolute
但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。 Q37、什么是块级格式化上下文（BFC），如何工作？...top，right，bottom，left和z-index属性不适用。 相对relative 元素的位置相对于自身进行了调整，而没有更改布局（因此，如果没有放置元素，将为元素留出一定的空隙）。...绝对absolute 元素从页面流中删除，并且相对于其最接近的祖先（如果有）或相对于初始包含块而定位在指定的位置。绝对定位的盒子可以有边距，并且不会与其他任何边距一起折叠。...这些元素不会影响其他元素的位置。 固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位的混合。...将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。 Q41、什么是供应商前缀？
布局页面的基本概念由于页面内容的大小可能超过原生窗口提供的显示区域的大小，CSS中称页面上当前显示出来的区域为ViewPort，这个ViewPort相对页面的原始位置可通过滚动条来调整；CSS标准中定义了...width/height等属性所能描述的矩形区域；而这块区域相对于布局容器的坐标top、left，往往由布局容器按照block-flow、inline-flow等规则布局该元素时确定；如何确定页面元素显示位置一个...block-level元素，其属性left、top、right、bottom不起作用；position属性为relative的元素同static属性元素一样，但其left、top等属性可以有效，其坐标相对于布局容器而言...和inline flow规则就可确定其起始位置，其中inline-level元素可在其布局容器提供的区域内自动换行；而block-level元素可在其布局容器提供的区域内自动换一个段落。...如何理解z-index的使用页面元素z-index属性的出现，引入了页面元素三维布局的思路，提出分层的概念，具有同一z-index属性的所有元素按照上面提到的二维布局方式(确定其位置及大小)来布局，而不同
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
