特点 不会像浮动一样脱离文档流，只是视觉上的效果，不会对其他元素产生影响 定位元素层级比层级元素高，所有定位层级相同： 定位的元素会覆盖在普通元素上。...通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。...无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。 粘性定位 如何设置为粘性定位 给元素设置 position:sticky 即可实现粘性定位。...粘性定位通常用于创建吸顶效果或侧边栏固定效果，当用户滚动页面时，元素会始终保持在视口内的特定位置。...如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。
粘性定位 sticky 可以简单的认为是 「相对定位 relative」 和 「固定定位 fixed」 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。...之后，元素将固定在与顶部距离 0px 的位置。...其实这样我们就可以很清楚的知道为什么 sticky 元素的高度为什么不能等于它爸爸的高度了，因为如果相等的话，粘性定位元素已经完全没有了实现粘性效果的空间，也就相当于失效了。...注意点 当然使用 sticky 的时候，我们需要注意几个点： 父级元素不能有任何 overflow:visible 以外的 overflow 设置，否则没有粘滞效果。...思路大致是首先绘制第一张图片，作为底图，然后我们通过绘制第二张图片，覆盖掉部分第一张图片，这样就可以实现前面提到的效果。
如果父元素有定位（相对定位、绝对定位、固定定位，但不能是静态定位）则它会以最近一级的有定位的父元素作为参照元素移动位置。...注意最近一级的 ，有定位的 这两个条件，缺一不可，如果第一个父元素没有定位，则会找第二个父元素（前提是第二个父元素有定位，如果没有定位再往上一级找）作为参照位置。...特点： 固定定位跟父元素没有任何关系。 固定定位的元素不会随着滚动条的滚动而滚动。 固定定位后，该元素不会占用原先的位置，脱离标准流。...特点： 粘性定位以浏览器的可视窗口为参照点移动元素。 粘性定位的元素会占有原先的位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...绝对定位(固定定位）会完全压住盒子： 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位（固定定位）会压住下面标准流所有的内容。
sticky 粘性定位，元素在相对和固定定位之间切换，视页面滚动的位置而定。 2.1 static - 静态定位 静态定位是所有元素的默认定位模式。...元素位置不会因滚动条滚动而发生变化。 不保留原始空间，因此它对页面其他元素的影响较大。 2.5 sticky - 粘性定位 粘性定位是一种混合定位方式，它结合了相对定位和固定定位的特点。...子绝父相的优点： 父元素占据正常文档流的位置，不会影响其他兄弟元素。 子元素可以灵活定位在父元素的任意位置，而不受文档流的约束。 这种方式通常用于一些复杂的布局中，如悬浮窗口、提示框等。...7.3 定位元素对其他元素的影响 浮动元素：浮动的元素会影响到标准流中的文字内容，但不会影响其他块级元素。 绝对/固定定位的元素：这类元素会完全压住其后方的所有内容，包括文字和图片。...7.4 粘性定位的应用场景 粘性定位适用于需要跟随页面滚动变化的元素，例如一些固定在顶部的导航栏，在滚动到特定位置时，导航栏会粘附在页面顶端，从而便于用户操作。
当它正常工作时，元素会"粘"在一定位置，但在滚动的其他部分，它又会停止"粘"住。作为一个每天都在使用CSS的人，作者无法接受自己不能深入理解这个问题的根本原因，所以决定深入研究sticky定位。...为什么？ 这样做的原因是，当一个元素被赋予sticky定位样式时，粘性元素的容器是粘性元素可以粘住的唯一区域。...这个元素没有其他元素可以浮动，因为它只能浮动在兄弟元素上，而作为唯一的子元素，它没有兄弟元素。 CSS Sticky 定位的真正工作原理！...这就是前面例子中，粘性元素一开始就没有粘住的原因：粘性元素是粘性容器中唯一的子元素。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。
当我在包装元素中添加更多元素时，它就能开始正常工作了。 这是为什么？ 这是因为当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它可以粘贴的唯一区域。...粘性元素没有任何要浮动的元素，因为它只能浮动在同级元素上，作为唯一的子元素，它不能浮动。...容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。 这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。 CSS 粘性定位的示意图： ?...粘性元素与粘性容器 查看在CodePen上的例子： https://codepen.io/elad2412/pen/QYLEdK 理解 CSS 的粘性行为 正如我前面说过的那样，CSS 粘性定位的行为与所有其他...固定 —— 当元素被粘住时，它的行为与 position: fixed 完全相同，浮动在与视口的相同位置，并从流中移除。
CSS定位 为什么需要定位? 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子....子绝父相: 子级使用绝对定位,父级使用相对定位 子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置....当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位 固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位和固定定位的混合 语法: 选择器 { position : sticky ; } 以浏览器的可视窗口为参照点移动像素(固定定位特点...浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生的初衷就是做出文字围绕的效果.但是绝对定位(固定定位)会压住下面标准流所有的内容.
这些方法可以根据具体情况选择，以确保浮动元素不会破坏页面布局。...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。....element { position: absolute; top: 50%; left: 50%; } 固定定位 固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动...如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。 粘性定位不脱标，原有空间一直不变。...overflow: visible; 默认值，内容会溢出元素框外，可能覆盖其它内容。
position 的其他定位 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...inherit规定应该从父元素继承 position 属性的值。 sticky的使用 粘性定位可以被认为是相对定位和固定定位的混合。...之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。...#sticky-nav { position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 粘性定位为什么不起作用...使用条件： 父元素不能overflow:hidden或者overflow:auto属性。
子绝父相 父元素加相对定位，子元素加绝对定位 父盒子不加定位的话，子元素的定位将由浏览器的页面为准 固定定位 固定在浏览器的可视区域，与父元素无关 position:fixed; 固定到版心 贴版心右侧...：先left:50%;，再让固定定位的盒子margin-left:版心宽度的一半； 粘性定位 滑到某个位置时，盒子固定 position:sticky; top:10px; 特点： 以浏览器可视窗口为参照点移动元素...粘性定位占有原先的位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index的值来确定哪个靠上面 数值越大，盒子越靠上，可正可负 {z-index:2;} 绝对定位的盒子居中 加了绝对定位的盒子不能通过...margin来居中 水平 先走父元素宽度的一半 在往左走定位盒子的宽度的一半 垂直 高度的一半 往下走盒子高度的一半 扩展 特性 行内元素加绝对或者固定定位，可直接设置高度和宽度 块级元素加绝对或固定定位...，如果不给宽高，默认大小是内容的大小 浮动元素不会压住标准流的文字，绝对定位会压住所有内容
top等属性成固定位置的效果。...可以知道sticky属性有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...亦即如果你设置了top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...具有BFC特性的元素可以理解为一个完整的盒子，这个盒子不会产生塌陷，无论内部元素如何变化，其外部元素不受影响 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素...左浮动的元素会盖住未浮动元素一部分区域，但是文字不会被覆盖，形成了文字环绕的效果，如果不想这样，我们可以采用BFC的方式，和上面的例子相同，添加一个overflow:hidden来触发BFC即可 <div
display: inline;元素作为内联元素显示（和其他内联元素在同一行），不能设置宽度和高度。前面介绍的行内元素display的默认属性值就是inline。...app元素设置成居中之后，解下来我们想让app元素的子元素博文内容控件和博文目录控件左右布局，并且顶端对齐。...对于博文目录控件，flex: 0 0 auto;的意思是： flex-grow: 0：该元素不会扩展。 flex-shrink: 0：该元素不会压缩。...比如说，将博文目录粘在右侧控件的顶部还好，如果是粘在其他特定的位置，就需要精确地控制位置属性，否则就很容易与其他页面元素冲突。...不止粘性定位，浮动（float）、绝对定位（position: absolute）、固定定位（position: fixed）都会脱离HTML文档流，不推荐用来作为主要的布局方式，这里就不细说了。
一般下实现重合效果的方式是使用定位。定位元素可以和其他元素重叠。知识点讲解今日主要讲讲页面上的定位效果是如何实现的。有趣的定位效果下面这些好玩的展示效果都是通过定位实现的。...静态定位的元素不会受到 top, bottom, left, right影响。fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。...粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。...实现方案类型实现方案吸顶使用fixed定位的元素的位置相对于浏览器窗口是固定位置，可以实现吸顶的效果。超出父容器使用absolute绝对定位的元素的位置相对于最近的已定位父元素，可以超出父元素。...重叠元素使用absolute定位的元素可以和其他元素重叠。粘性定位sticky粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
，脱离文档流 fixed：固定定位，根据屏幕视口的位置来定位，脱离文档流 inherit：这种方式规定该元素继承父元素的position属性值。...必须指定 top, right, bottom 或 left 四个属性中的其中一个，粘性定位才会生效。否则其行为与相对定位相同。且元素不会脱离文档流。...list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承display属性的值。...DOM树上其他节点元素的可见性。...看这一篇就够了_Leon的博客-CSDN博客_bfc 简单来说就是，BFC是一个完全独立的渲染区域，让空间里的子元素不会影响到外面的布局。
，遇到父元素边缘换行 接下来让我们走进浮动和定位的世界 浮动 首先我们为什么需要浮动呢？...：relative;} 它是相对于自己原本的位置进行移动 它在移动之后，在标准流中仍旧占有原本的位置（即移动之后，原本位置仍旧保留，其他标准流无法占用该位置） 它在移动之后，在其他位置时，属于覆盖在其他盒子之上...（sticky） 粘性定位可以认为使相对定位和固定定位的混合 语法： 选择器{position：sticky；} 以浏览器的可视窗口为参照点移动元素（固定定位特点） 粘性定位占有原先的位置（相对定位特点...子绝父相： 父级为了限制子级，必须采用相对定位 自己为了放置于任意位置且不干扰其他盒子，必须采用绝对定位 我们给出一个案例来解释子绝父相： <!...（用来完成图文环绕） 绝对固定元素会将盒子和文字一并压住（用来完全覆盖） 结束语 好的，那么关于浮动和定位的知识点基本汇总完毕，希望能给你带来收获。
一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。...设置了position:sticky的元素并不会脱离文档流元素在区域内，元素不受定位的影响（top、left等设置无效）元素所在窗口发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left...另一种场景是在一个盒子中高度固定，窗口有滚动的情况下，实现某元素一直保持在窗口的某个位置三、注意事项父元素高度必须大于sticky元素的高度不设置父元素高度的时候，父元素不能使用除了overflow的visiable...属性，比如auto、scroll设置父元素高度，子元素高度超过父元素高度，父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动...粘性定位!
行内元素：行内元素不会独占一行，它们会在一行内从左到右排列，直到空间不足再换行。常见的行内元素有、、等。...inline-block：结合了block和inline的特性，元素本身是行内元素，但可以设置宽高等属性。 none：完全隐藏元素，元素不占据任何空间。...固定定位（Fixed） 固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。...粘性定位（Sticky） 粘性定位结合了相对定位和固定定位的特点，当元素在页面中滚动到一定位置时，会“粘”住并保持在该位置。... 这是一个粘性定位的元素 当页面滚动时，元素会在到达顶部时固定在顶部
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。...，其不脱离文档流，对于top、bottom、left、right、z-index属性的设置有效，设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块...，如果元素没有已定位的父元素，那么它的位置相对于，通常的使用方案是在外层嵌套一层relative相对定位元素作为父元素，再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移，...，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在中的元素使用fixed是相对于进行定位的，类似于在页面中创建了一个新的浏览器窗口...，元素的位置是基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...absolute 定位的元素和其他元素重叠。...BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.
一、简介css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。...二、使用场景比如导航或者Tab当我们下拉的时候，则会被隐藏，但是我们要实现随着下拉导航或Tab保持在浏览器窗口顶端。...三、注意事项父元素高度必须大于sticky元素的高度不设置父元素高度的时候，父元素不能使用除了overflow的visiable属性，比如auto、scroll设置父元素高度，子元素高度超过父元素高度，...父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动，sticky仅在父元素高度内有效sticky元素需要设置top...粘性定位!
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
