如何使绝对定位元素与页面的其余部分一起移动？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

绝对定位 Absolutr Positioning 。在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。...这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。这意味着它们对之后的同胞盒的布局没有影响。同时，即便绝对定位盒有外边距margin，也不同其他任何外边距折叠。...比如说，如果想使盒固定在屏幕视口顶部，但不出现在打印页的顶部，这两种设定可以通过使用@media规则来分开，如下： @media screen { h1#first { position: fixed...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系与相互作用。那么，FC包含哪些类型呢？答案是六种类型：BFC、IFC、TFC、GFC 、FFC，RFC。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。如何生成BFC：根元素，即HTML元素。

2K1 0

6-css样式

自动缩放直到适应并填充整个容器 space以相同的间距平铺且填充整个容器背景图片定位background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动...text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐 text-bottom对象的底端与所在行文字的底端对齐文本缩进text-indent...，需要设置高度，让元素的内容将元素撑高鼠标样式cursor 定义鼠标的样式cursor:pointer default默认，pointer小手形状，move移动形状透明度opacity opacity...""; display: block; width: 0; height: 0; clear: both; } 定位position 层模型，绝对定位（相对于父类）如果想为元素设置层模型中的绝对定位...，需要设置position:absolute绝对定位，这条语句的作用加你个元素从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位

2.3K2 0

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

是的

没有找到

面试题整理｜45个CSS面试题

而更改绝对定位会触发回流。变换使浏览器为该元素创建一个GPU层，但是更改绝对定位属性将使用CPU。因此，translate（）效率更高，并且可以缩短绘制时间，从而使动画更流畅。...Q36、CSS如何实现元素的定位？ position属性指定用于元素的定位方法的类型。...例如，通过将诸如 postcss-loader之类的内容与 webpack一起使用，您可以编写可能与将来兼容的CSS，从而使您可以使用CSS变量（而不是Sass变量）之类的东西 Q40、相对，固定，绝对和静态定位的元素有什么区别...绝对absolute 元素从页面流中删除，并且相对于其最接近的祖先（如果有）或相对于初始包含块而定位在指定的位置。绝对定位的盒子可以有边距，并且不会与其他任何边距一起折叠。...这些元素不会影响其他元素的位置。固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。粘性sticky 粘性定位是相对定位和固定定位的混合。

6K3 0

css3系列-2.css中常见的样式属性和值

background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/ background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动...定位属性一般来说用得比较多，希望你能看懂下面的代码相对定位 .position{ position: relative; left: 2px; top: 2px; } 代码中的意思是相对定位...，相对定位就是说，相对于我本身元素的位置，再对这个元素进行移动。...绝对定位 .positionA{ position: absolute; left: 20px; right: 20px; } 以上为绝对定位，绝对定位是相对于整个页面来说的，...页面上的最左上角代表(0,0)坐标，绝对定位的起始位置也是这里。所以上面这段代码实现的就是距离左边20px,距离上边20px，这样理解可能比上面我说的以相反的方向移动要简单很多吧。

1.6K2 0

CSS从基础到熟练学习笔记（三）CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)

background-image: url("https://img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; } 如何定位背景图像...Xpx Ypx 也可以使用像素指定位置，或者像素值和百分比值混合使用 initial 将此属性设置为其默认值 inherit 从它的父元素继承这个属性例如： body { background-image...background-position: center } 背景图片附着状态background-attachment CSS使用 background-attachment属性指明背景附件属性来设置背景图像是否是固定的或是与页面的其余部分一起滚动...语法： background-attachment: scroll| fixed| local| initial| inherit; 属性值： scroll 随元素一起滚动，默认值。...如果背景在页顶，则页面拉到页脚时看不到页顶元素也就看不到图片了。 fixed 固定背景背景图片，使用该值时，背景图片会一直在固定位置显示。

1.6K1 0

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

, 使用的就是相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于父容器进行定位 ; 7、绝对定位特点绝对定位以带有定位的父级元素为基准 , 通过边偏移移动位置 ; 如果绝对定位...与滚动条滚动没有任何关系 ; 固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的...的容器需要居中对齐 ; 1、设置固定尺寸使绝对定位元素水平 / 垂直居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ; 2、...100px; 11、多个盒子堆叠次序问题在网页布局中 , 如果多个盒子都设置绝对定位 , 那么这些盒子会堆叠在一起 ; 设置了定位样式的盒子会压住标准流盒子 , 如果有多个设置定位的盒子 ,...1px; } 为子元素设置浮动 , 可以解决外边距塌陷问题 ; 为子元素设置绝对定位 , 可以解决外边距塌陷问题 ; 15、元素显示与隐藏控制元素的显示与隐藏的样式有如下三种

1.9K1 0

前端成神之路-定位

3.2.3 绝对定位(absolute) - 重要绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document...绝对定位的特点：（务必记住）绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置不保留原来的位置，完全是脱标的。...因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。定位口诀 —— 子绝父相刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？...案例小结：子绝父相 —— 子元素使用绝对定位，父元素使用相对定位；与浮动的对比：绝对定位：脱标，利用边偏移指定准确位置；浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。...新浪案例分析顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动；左右两侧的广告图片固定在浏览器可视窗口的左右两侧，不会随窗口一起滚动；注意：底部的内容图片初始显示在顶部图片的下方，如何解决？

2.2K2 0

CSS背景1-概述

值说明 padding-box 背景图像相对于内边距框来定位。（默认） border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。...1.4、background-repeat background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。值描述 repeat 默认。...background-size : 100% 100% 与 cover 和 contain 区别。 100% 100% 图片宽度和高度的比例会被改变，填满盒子。...1.7 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。值描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。...fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。

7582 0

CSS进阶08-绝对定位 Absolute Positioning

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。） 1. 简介在绝对定位模型中，盒根据其包含块显式偏移。...盒从标准流中完全脱离（对后来的同胞元素没有影响）。绝对定位盒为其标准流的子元素和绝对定位（非固定定位）后代创建新的包含块。...然而，绝对定位元素的内容不在任何其他盒的流中，它们可能遮挡其他盒的内容（或被遮挡），这取决于重叠盒子的堆叠层级stack levels 。 2....固定定位 Fixed positioning 固定定位是绝对定位的子类。唯一的区别在于，固定定位盒的包含块是由视口创建的。在连续媒体中，当文档滚动时，固定盒不会移动。...在分页媒体paged media中，固定定位盒在每一页重复。这对布局很有用，比如，在每个页面的底部放置签名。比页面区域要大的固定定位盒将会被裁剪。固定定位盒在初始化包含块中不可见的部分将不会打印。

6621 0

关于浮动

3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？三种定位方式： relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。...使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。 absolute 绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。...如何使用? 因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。...，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。

2.4K4 0

HTML定位简介

针对一个相对定位的元素所产生的。我们看下面的图： ?...而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图： ?...即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。...而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。这是一种很特别并且也是非常实用的应用方式。...相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。

2K2 0

(第一版)知识点

PC端页面移动端页面解决用户体验问题必备条件是什么？ 1>会上网，会打字，懂得互联网是什么 2>兴趣 3>肯练习浏览器和服务器如何信息交互？通过浏览器如何查看请求报文和响应报文?...第二种方法解决浮动浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。...如何让div2移动到图2上面的位置？...position:absolute; 绝对定位 a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度； d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于body发生偏移...]；定位层级 position:fixed；固定定位与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；问题：IE6不支持固定定位； position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法

1.3K2 0

CSS入门指南-3：定位元素

这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素 body 在定位。现在就涉及到一个概念：定位上下文，这个后边说，先继续看最后一种定位方式：固定定位。盒子位移属性是如何工作？...对于绝对定位和固定定位，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之...，如果设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。...“right”的位移属性优先级高固定定位（fixed）固定定位与绝对定位类似，我们先看下把定位改为相对定位的效果： p#specialpara { position: fixed;...固定页头和页脚固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是会固定在页面。现在我们来看下定位上下文。

8161 0

【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

一、绝对定位 ---- 绝对定位是以父级元素为基准 , 设置边偏移 ; 为子元素添加绝对定位 , 如果父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果父容器没有定位 , 则相对于浏览器左上角位置进行定位..., 使用的就是相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于父容器进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码标准流父容器中包含一个...移动标准流父容器盒子 , 发现子容器也随着父容器一起移动 , 这种情况下父容器与子容器是绑定到一起的 ; 为父容器设置 100 像素的外边距 , 此时父容器与嵌套的子元素一起向下和向右移动了...> 展示效果 : 三、子元素设置绝对定位与父容器是否有定位的效果对比...---- 在上面代码的基础上 , 为子元素添加绝对定位数据 , 分别设置顶部和左侧 50 像素的偏移量 ; /* 绝对定位 */ position: absolute;

1.2K2 0

从头学前端-CSS基础04

使用- 静态定位static> 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移- 相对定位relative>元素在移动时会以自己原来的位置移动；原来在标准流中的位置还保留,后面的盒子以标准流对待它...(不脱标)- 绝对定位absolute> 绝对定位是元素在移动位置的时候，是相对于它祖先元素移动； > 如果没有祖先元素或祖先元素没有定位，则以浏览器为准对齐 > 如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置...； > 觉得定位不占用原来标准流的位置，即脱标- **子绝父相**：>子元素是绝对定位，父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；- 固定定位fixed> 以浏览器的可视窗口为准移动元素...> 与父元素没有任何关系> 不随着滚动条的滚动而滚动> 不占用标准流的位置，是一种特殊的绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位的混合> 已可视窗口为参考点> 占有标准流位置...，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)> 绝对定位会压住标准流的盒子内容；网页布局总结：网页布局是通过标准流，浮动，定位一起完成的；标准流可以让盒子上下或左右排列浮动可以让多个块级元素一行显示或左右对齐盒子定位有层级概念

7874 0

「Adobe国际认证」视觉层次结构的，设计原则和模式

想想一个好的登陆页面是什么样的：顶部的公司标志，顶部或左侧的菜单，底部不太重要的元素。这些元素是有目的的。什么是视觉层次？视觉层次结构是设计中元素按每个元素中的重要性顺序排列。...每个元素所具有的视觉权重或视觉对比决定了其相对于设计中其他元素的重要性。使用桌面排版软件可以帮助平面设计师在指南、模板和其他工具的帮助下将所有材料整齐地布置在一页上，以帮助优化布局。...这会将这些元素移向视觉层次结构的底部。这并不一定意味着最重要的元素必须是巨大的。适度使用大小并保持品味；太大的元素可能会压倒设计的其余部分，而太小的元素可能会在翻译中丢失。...读者的眼睛然后向下并斜向对角移动，并以与扫描顶部相同的方式扫描页面的下部，从而形成“Z”形。式设计的；网页设计师非常聪明。最重要的信息几乎总是在顶部栏上：徽标、搜索工具、导航选项卡。...没有什么原则比另一个原则更重要，因为它们都涉及使您需要脱颖而出的信息真正跳出页面的方法。

8383 0

掌握CSS定位：构建现代网页布局的关键技巧

CSS定位是一种强大的布局技术，它允许您精确控制元素在网页上的位置。使用CSS定位，您可以将元素放置在页面的任何位置，而不受正常文档流的限制。有两种主要的CSS定位方式：相对定位和绝对定位。...相对定位相对定位是相对于元素在正常文档流中的原始位置进行定位的。使用相对定位，您可以通过指定相对于原始位置的偏移量来移动元素。....relative { position: relative; top: 20px; left: 30px; } 在上面的例子中，.relative 元素相对于其原始位置向下移动了...绝对定位绝对定位允许您将元素放置在其包含元素（通常是父元素）的指定位置上。这种定位方式完全脱离了文档流，元素不再占据空间，因此可以覆盖其他元素。...如何使用CSS定位？要使用CSS定位，首先需要将元素的position属性设置为relative或absolute。

5813 0

【CSS3】css开篇基础（4）

这是因为浮动会脱标，导致不和标准流在一起排序了，这样就可能导致浮动和标准流发生重叠。注意浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流....绝对定位绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置；如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位；如果祖先元素有定位（可以是相对、绝对或者固定定位...），则以最近的已经定位的祖先元素为基准移动位置。...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。...*/ right: 0; /* 元素右侧与容器右侧对齐 */ margin-top: -50px; /* 元素向上移动自身高度的一半 */ width: 100px; /* 元素宽度

6381 0

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

当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。...务必掌握移动端相关问题。 9. 务必掌握开发兼容浏览器代码等问题。 10. 务必掌握面向对象等问题，如（面向对象编程中的类，继承等）。 11. 务必掌握Ajax与JSON等。 12....3.每次写浮动元素，会引起父元素的高度无法被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会类似于遮盖现象，这里注意如果一个元素浮动，那它前面的元素也是需要浮动的，不然会影响页面显示的结构...display: block; clear: both; } 4.位置定位：relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位；absolute表示为绝对定位，相对于最近一级定位...，相对于static的父元素进行定位；fixed用于生成绝对定位，相对于浏览器窗口或frame进行定位；static默认为没有定位；sticky用于生成黏性定位的元素，容器的位置可以根据正常文档流计算得出

2K34 1

vw, vh视窗宽高单位的使用

原因就在于，覆盖层为固定定位(fixed)元素（绝对定位(absolute)元素也如此）。...拖动range控件，可以看到图片尺寸无论怎样变，弹框总是居中的——纯CSS实现，没有JavaScript的计算与定位，您有兴趣可以研究研究的~~ 正如上面所提到的，某些情况下，vw, vh所产生的效果与百分比...于是，我下面所设想的应用场景就会脱离宽度，脱离绝对定位元素，会是什么呢？？...七、场景之：Office Word效果我们可以把web页面做得像Office文档那样，一屏正好一页；拖动滚动条，我们可以一直往下看到最后一页。如果只借助CSS，这种效果绝对定位是实现不了的。...demo页面的宽高按照标准纸张的21:29.7的比例制定，因此，所有单位值都是使用的vh单位。

2.8K1 0

点击加载更多

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

6-css样式

面试题整理｜45个CSS面试题

css3系列-2.css中常见的样式属性和值

CSS从基础到熟练学习笔记（三）CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)

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

前端成神之路-定位

CSS背景1-概述

CSS进阶08-绝对定位 Absolute Positioning

关于浮动

HTML定位简介

(第一版)知识点

CSS入门指南-3：定位元素

【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

从头学前端-CSS基础04

「Adobe国际认证」视觉层次结构的，设计原则和模式

掌握CSS定位：构建现代网页布局的关键技巧

【CSS3】css开篇基础（4）

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

vw, vh视窗宽高单位的使用

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐