我如何定位:固定一个相对于父容器的元素？ - 腾讯云开发者社区

场景描述 sticky 定位的元素，有两个状态：相对定位和固定定位。开发时，有给处于固定定位(Pined)状态 sticky 定位的元素加额外样式的需求。如加个阴影效果。...[sticky-width-shadow.gif] 目前，没法通过 CSS 知道 sticky 是否处于固定定位的状态。解决方案对于这个场景，可以用 JS 实现。...判断元素是否处于固定定位状态，就是判断该元素与滚动的父元素的位置关系。当该元素部分处于固定定位状态时，其相对于滚动的父元素部分不可见。...可以用 Intersection Observer 来监听该元素与滚动的父元素的位置关系。...*/ .myElement { position: sticky; top: -1px; } /* 固定定位状态的样式 */ .is-pinned { color: red; } 如果给处于固定定位时的

4.9K2 0

年度实用技巧 | 页面上吸顶的效果是怎么做到的

——莎士比亚上篇习题解析上一篇结尾留了一个小习题，我们先来看一下，上下两层结构有重合是如何实现。一般下实现重合效果的方式是使用定位。定位元素可以和其他元素重叠。...吸顶超出父容器重叠元素粘性定位知识点定位以下知识内容来自于菜鸟教程属性名作用属性值position指定了元素的定位类型。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。...静态定位的元素不会受到 top, bottom, left, right影响。fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。...absolute 定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于htmlsticky 定位基于用户的滚动位置来定位。...实现方案类型实现方案吸顶使用fixed定位的元素的位置相对于浏览器窗口是固定位置，可以实现吸顶的效果。超出父容器使用absolute绝对定位的元素的位置相对于最近的已定位父元素，可以超出父元素。

1182 0

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

父级元素为基准 , 设置边偏移 ; 为子元素添加绝对定位 , 如果父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申..., 如果父容器没有定位 , 则查找父容器的父容器是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述父容器的定位不一定是绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是...相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于父容器进行定位 ; 7、绝对定位特点绝对定位以带有定位的父级元素为基准 , 通过边偏移移动位置 ; 如果绝对定位的元素...布局中的位置 , 漂浮在任何元素上方 ; 固定定位只相对于浏览器可视窗口进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位与父元素没有任何关系 ; 固定定位...与滚动条滚动没有任何关系 ; 固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的

3601 0

什么是BFC

top等属性成固定位置的效果。...可以知道sticky属性有以下几个特点：该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量这个东西很好的应用就是导航栏吸顶效果，但是比较蛋疼的是这个属性的兼容性还不是很好...具有BFC特性的元素可以理解为一个完整的盒子，这个盒子不会产生塌陷，无论内部元素如何变化，其外部元素不受影响如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素浮动元素...">我是一个左浮动的元素我是一个没有设置浮动, 也没有触发 BFC 元素

8552 0

一文掌握css常见布局float、position、flex、grid

脱离文档流设置了float属性的元素跟绝对定位一样，脱离了文档流，对于一个父元素中只有一个或多个有浮动属性的元素，父元素会产生塌陷效果，这时一定要留意不要有让父元素的高度自适应的想法：浮动实现横向导航目前浮动常见的用法便是配个...relative属性一是用来相对于自己的默认位置来做定位，更多的场景是只是用他来做一个定位标记给里面的absoute元素提供定位点。...absoluterelative是相对于自己本身的默认位置坐定位，absolute是相对于自己最近一层有定位属性的父级元素来做定位，这个定位属性可以是relative，可以是absolute，也可以是absolute...，通过用来我们需要将某个子元素在父元素的固定位置显示，比如实现窗口的关闭按钮这种场景。...item的宽度项目属性 flex-grow定义了剩余空间如何利用，常用来当固定宽度的几个元素没有占满整个容器，然后剩余的宽度都由一个元素占满。

2771 0

关于浮动

对父容器的影响：不与父容器发生外边距合并。无法撑开父元素。对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。...3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？三种定位方式： relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。...如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。 fixed 固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。...使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏。 4、z-index 有什么作用? 如何使用? 因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。

2K4 0

【CSS3】css开篇基础（4）

父容器恢复高度当产生浮动后，我们的浮动元素盒子默认高度是0，所以如果一个盒子里装的全是浮动盒子，该盒子高度就为0，就会坍塌掉，同时还会影响到后面标准流的布局。...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。....element { position: absolute; top: 50%; left: 50%; } 固定定位固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动...的中间，无论父容器的尺寸如何变化。...5.显示和隐藏元素 display 属性可以用于设置一个元素应如何显示, display:none;隐藏对象 display:block;除了转换为块级元素之外，同时还有显示元素的意思 display

671 0

掌握这4 个关键的 CSS 属性，你才算入门 CSS

2、Float float 属性用于定位和格式化内容。简单来说，float 属性管理HTML内容在父容器一侧边缘的位置。...它只是指 HTML 元素的背景，大多数时候开发人员在多个背景属性之间感到困惑。但是，如果你对如何在 CSS 中选择背景有一个清晰的解释，那么使用 HTML 元素会容易得多。...大多数情况下，你将使用以下 3 个值：绝对：绝对定位的元素查找本身具有相对、绝对或固定位置的父后代元素。相对：具有相对位置的元素将相对于其正常位置进行定位。...固定：具有固定位置的元素相对于视口定位，但是，顶部、底部、左侧和右侧属性用于定位元素。...但是，当我们为父元素（蓝色容器）提供相对位置时，所有具有绝对位置的元素都将落入新的父元素之下。你可以观察到，当我们将相对位置值传递给父元素时，子元素的高度现在是相对于父元素的。本文完~

1.9K3 0

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

; 固定定位只相对于浏览器可视窗口进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位与父元素没有任何关系 ; 固定定位与滚动条滚动没有任何关系 ;...固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的本质是一种特殊的绝对定位 ;...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为固定定位元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;...1000 像素, 方便滚动设置 */ body{ height: 1000px; } /* 最外层父容器盒子 */ .box { /* 子元素设置绝对定位父元素需要设置相对定位.../* 子元素设置绝对定位父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /* 下边偏移 0 紧贴底部 */ bottom

1.8K2 0

【Web前端】深入CSS 布局

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。...五、浮动（Float）浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。...需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。...绝对定位（Absolute）绝对定位的元素相对于最近的已定位祖先元素进行定位（如果没有，则相对于初始包含块）。绝对定位的元素脱离了文档流，不会影响其他元素的布局。...固定定位（Fixed）固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。

1051 0

position属性值有哪些_静态web和动态web的区别

大家好，又见面了，我是你们的朋友全栈君。...1： static 静态定位，是默认值，当代码使用top,left.等，无效 2： absolute 绝对定位，相对于父元素进行定位，元素通过top,right,left等进行定位 3： fixed 固定定位...，相对于浏览器进行定位 4： relative 相对定位，元素通过top,left 等与它之前的正常进行定位 5： sticky 该元素并不脱离文档流。...当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

7062 0

CSS(五)

也就是说，不会再按照默认文档流来布局元素了。浮动的元素会从正常文档流中取出来(即浮动元素的父容器不再包含该浮动元素)，然后始终与其父容器的左侧或右侧对齐。也会尽可能的在父容器内向上浮动。...设置父容器的 overflow: hidden 属性，可以使父容器仍然容纳浮动元素，如下图所示。 2. 让父元素也浮动。(这种做法需要额外设置父容器宽度) 3....(坍塌只针对于父容器的第一个子元素) 定位虽然之后我们会谈论 Flexbox 和 Grid，但我们仍需要讨论下 position 属性。他是古老布局的基础。...(position 属性的值为 fixed)元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。...一个固定定位元素会脱离正常文档流。

1K2 0

CSS补充

这里就引出了浮动定位 2、浮动定位 float float属性取值为 left/right 脱离文档流 3、相对定位 relative 元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留...1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定...它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。当元素出发BFC后会具有如下特点：开启BFC后，元素不会被浮动元素覆盖。...开启BFC后，元素可以包含浮动的子元素如何触发BFC 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题设置元素绝对定位

6171 0

前端学习笔记—CSS

2.给一个固定宽高的块级元素左右margin-left，margin-right设置auto可以实现该元素在其父容器里面水平左右居中，反之设置竖直方向的margin则竖直方向居中。...解决方法见文章下方浮动解析，如设置父元素清除浮动设置float浮动后的元素不会出现内部子元素上下margin合并问题，也可以清除第一个子元素上边距和最后一个子元素下边距被父元素剥夺问题内容溢出问题...固定定位元素 fixed 的元素相对于视口html定位，且不随视口滚动而滑动，不占原来的位置。同时设置float浮动失效。...:stretch;属性是单行子元素默认值，在不设置固定高度的时候，侧轴方向高度自动充满父容器。...子元素设置固定高度时，与flex-start效果一样。 align-content:stretch;属性是多行子元素默认值，在不设置固定高度的时候，侧轴方向高度自动平分父容器。

1331 0

【愚公系列】《微信小程序与云开发从入门到实践》015-组件的布局

absolute：绝对定位，元素框不再占有文档流中的位置，将相对于页面进行绝对定位。 fixed：固定定位，元素框不再占有文档流中的位置，将相对于浏览器窗口进行绝对定位，滚动页面时元素位置不变。...relative 定位使元素相对其原始位置偏移，原始位置仍占据空间。 absolute 定位使元素脱离文档流，相对于最近的已定位的父元素（不是 static 定位的元素）进行定位。...偏移量是相对于最近的已定位父元素（即 position 属性不为 static 的父元素）。如果没有定位的父元素，则相对于页面进行定位。...由于 absolute 定位，view3 会紧接着 view1 渲染，不会受到 view2 的影响。注意：absolute 定位的元素是相对于父元素的，如果没有指定父元素，它将相对于页面进行定位。...absolute 定位：元素脱离文档流，定位相对于最近的已定位父元素（如 relative、absolute 或 fixed）。 fixed 定位：元素固定在浏览器窗口，滚动页面时不受影响。

1110 0

web前端开发初学者十问集锦（3）

1.div的height:100%没有效果，如何让元素的高度自动扩充为父元素的高度? 我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。...如果你想让这个div #demo里的一个div #sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。...一个Web大神告诉我说没什么区别，我实验了，还没发现有什么区别？一个内置的间隔，所以即使你设置interval为0,定时器也会间隔一段时间之后再执行。 10.CSS中默认定位，相对定位，绝对定位，固定定位的区别？...定位的参考对象是离自己最近的非static定位的父元素。脱离文档流，不会撑开父容器。固定定位： position:fixed。生成绝对定位的元素，相对于浏览器窗口进行定位。

1.6K2 0

对定位的深入理解与应用

相对定位如何设置相对定位元素设置 position:relative ，实现相对定位调整： left 、 right 、 top 、 bottom 参考点相对于自己原来的位置进行定位...**原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。...定位参考点参考该定位元素的包含块对于没有脱离文档流的元素：包含块就是父元素；对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。...定位元素：默认宽、高都被内容撑开，可以自由设置宽高固定定位如何设置为固定定位给元素设置 position: fixed 即可实现固定定位。...滚动属性（特别是 overflow: auto;）可以在元素内容超出容器时提供滚动条，使用户能够滚动查看全部内容，与粘性定位结合使用时，可以在固定位置时仍然允许内容的查看和操作。

1181 0

CSS进阶03-定位体系，格式化上下文，常规流

在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。如何生成BFC：根元素，即HTML元素。...垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。...通过设置元素的display属性为flex或 inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。...伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox定义了伸缩容器内伸缩项目该如何布局。

1.7K1 0

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

当面试官问如何解决呢，首先第一个就是可以为父元素设置固定高度；第二可以为父元素设置overflow:hidden即可清除浮动，让父元素的高度被撑开；第三可以使用clear:both样式属性清除元素浮动...，相对于static的父元素进行定位；fixed用于生成绝对定位，相对于浏览器窗口或frame进行定位；static默认为没有定位；sticky用于生成黏性定位的元素，容器的位置可以根据正常文档流计算得出...14.聊聊rem和em：rem表示相对于根元素的字体大小；em表示相对于父元素的字体大小。...18.FFC表示自适应格式化上下文，即display值为flex或inline-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。...24.px和em是长度单位，区别在于px是固定的，指为多少就是多少，计算比较容易，em不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。

1.7K34 1

2020 年「我与技术面试那些事儿」

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

第 003 期如何探测 sticky 定位的元素是否处于固定定位(Pined)状态

年度实用技巧 | 页面上吸顶的效果是怎么做到的

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

什么是BFC

一文掌握css常见布局float、position、flex、grid

关于浮动

【CSS3】css开篇基础（4）

掌握这4 个关键的 CSS 属性，你才算入门 CSS

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

【Web前端】深入CSS 布局

position属性值有哪些_静态web和动态web的区别

CSS(五)

CSS补充

前端学习笔记—CSS

【愚公系列】《微信小程序与云开发从入门到实践》015-组件的布局

web前端开发初学者十问集锦（3）

对定位的深入理解与应用

CSS进阶03-定位体系，格式化上下文，常规流

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

2020 年「我与技术面试那些事儿」

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐