CSS中的相对和绝对定位:有可能创建“打卡”效果吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

：CSS 相对定位和绝对定位有什么区别？

[猫头虎全栈面试宝典]：CSS 相对定位和绝对定位有什么区别？适用人群：前端开发者 | CSS 爱好者 | 面试冲刺者阅读时长：10分钟，知识点浓缩高能！...学习收益：理解 CSS 相对定位和绝对定位的本质区别，掌握实际项目中的应用技巧！开篇猫语：为什么学这个很重要？...猫头虎碎碎念： CSS 定位是网页布局的核心能力，无论是简单的按钮微调，还是复杂的弹窗定位，都离不开相对定位和绝对定位的熟练应用。...✨ 面试全景图猫头虎整理了关于 CSS 定位的高频考点与延伸内容： [基础问题]：什么是相对定位？什么是绝对定位？ [进阶问题]：两者的主要区别和适用场景？...实战问题：开发中的应用技巧问题 3：如何结合相对定位和绝对定位实现复杂布局？场景：假设需要在一个固定宽高的容器中，精确定位一个悬浮按钮。

5941 0

【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )

一、CSS3 2D 转换 - 平移 / 旋转 / 缩放 ---- CSS3 中的 Transform 转换 , 可以实现标签元素的位移 / 旋转 / 缩放 ; CSS3 转换的二维坐标系如下 :...该坐标系是界面开发的常用坐标系样式 ; 二、CSS 2D 转换 - Translate 移动 ---- 在网页中将标签元素沿着 x 轴和 y 轴各自移动指定的长度 , 就是 2D 转换中的移动操作...(50%, 50%); 移动盒子模型位置的方法 : 通过定位样式移动盒子 : 相对定位 relative 样式 , 绝对定位 absolute 样式 ; 通过设置盒子外边距 : 外边距 margine.../style> 执行结果 : 四、Translate 百分比移动实现绝对定位的居中效果...: 2、百分比移动实现绝对定位的居中效果代码示例代码示例 : <!

2.1K3 0

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

是的

没有找到

寒假提升｜ Day9 CSS 第七部分

今日的代码和讲义以及思维导图：【点击此链接下载 Day09.zip】一. 绝对定位(absolute) 1.1....，子元素的绝对定位都是相对于父元素进行定位如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是: 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流...+ bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left:...粘性定位 sticky 另外还有一个定位的值是position: sticky，比起其他定位值要新一些. sticky是一个大家期待已久的属性; 可以看做是相对定位和固定(绝对)定位的结合体; 它允许被定位的元素表现得像相对定位一样...float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果; 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具; 绝对定位、浮动都会让元素脱离标准流

1.4K2 0

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

CSS定位是一种强大的布局技术，它允许您精确控制元素在网页上的位置。使用CSS定位，您可以将元素放置在页面的任何位置，而不受正常文档流的限制。有两种主要的CSS定位方式：相对定位和绝对定位。...以下是一些常见的应用场景：响应式布局：使用CSS定位可以轻松实现响应式网页布局，确保在不同设备上都能正确显示。弹出式菜单：通过绝对定位，您可以创建具有动画效果的弹出式菜单，以提供更好的用户体验。...滚动效果：通过固定定位，可以创建具有吸顶效果的导航栏，使用户可以随时访问导航选项。工具提示和气泡提示：使用相对定位和绝对定位，可以创建提示框，为用户提供额外的信息。...它使开发人员能够精确控制元素的位置和堆叠顺序，从而实现各种各样的布局和交互效果。通过深入研究和实践，您可以更好地利用CSS定位来创建令人印象深刻的网页。...无论您是新手还是经验丰富的开发人员，都应该掌握这一强大的技术，以提升您的网页设计和开发技能。在不断学习和探索的过程中，您将发现CSS定位的无限潜力，可以为您的项目增添无限可能性。

9553 0

面试官：CSS 面试题集锦

Bootstrap框架中的网格系统就是将容器平分成12份。你用过媒体查询，或针对移动端的布局/CSS 吗？...absolute 绝对定位绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。...请注意，区别于相对定位的还有一点，绝对定位脱离常规文档流！ ? fixed 固定定位固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间而改变绝对定位会触发重新布局，进而触发重绘和复合。改变绝对定位会使用到 CPU。...高性能CSS3动画动画中尽量少使用能触发layout和paint的CSS属性，使用更低耗的transform、opacity等属性尽量减少或者固定层的数量，不要在动画过程中创建层尽量减少层的更新（

5K3 0

10.4【前端开发】页面布局：如何理解 “CSS 视觉格式化模型”？

一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。...普通流：按照次序依次定位每个盒子浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素...当CSS的 position 属性为 static 或 relative，并且 float 为 none 时，其布局方式为普通流。普通流又有两种情况：静态定位和相对定位。... 效果：绝对定位如果元素的 position 为 absolute 或 fixed，该元素为绝对定位。在绝对定位中，盒子会完全从当前文档流中移出。...此处仅指定位和位置计算而言，元素在文档树中仍然与其他元素有父子或兄弟等关系。绝对定位的元素，位置会使用 top、bottom、left 和 right 相对其包含块进行计算。

1.3K1 0

寒假提升｜ Day8 CSS 第六部分

在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体; TrueType字体:拓展名是 .ttf OpenType/TrueType字体:拓展名是 .ttf...将字体文件和默认的css文件导入到项目中字体图标的使用字体图标的使用步骤: 第一步: 通过link引入iconfont.css文件第二步: 使用字体图标使用字体图标常见的有两种方式: 方式一:...margin或者padding，通常会影响到标准流中其他元素的定位效果不便于实现元素层叠的效果如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?..., 静态定位使用下面的值, 可以让元素变成定位元素(positioned element) relative:相对定位 absolute:绝对定位 fixed:固定定位 sticky:粘性定位静态定位...相对定位元素按照normal flow布局可以通过left、right、top、bottom进行定位定位参照对象是元素自己原来的位置相对定位的应用场景在不影响其他元素位置的前提下，对当前元素位置进行微调

1.1K2 0

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

*/这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。...绝对定位（absoulte）绝对定位跟静态定位和相对定位相比，它会把元素彻底从文档流中拿出来。...这样看效果和绝对定位完全一致，但是固定定位的定位上下文是浏览器窗口，她并不会随页面滚动。以下是使用相对定位和固定定位的图示： ? ?...固定页头和页脚固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是会固定在页面。现在我们来看下定位上下文。...外部 div 改为相对定位之后，后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位。此时内部 div的 top 和 left 属性参照的就是外部 div。

1.2K1 0

【CSS】15秒教会你如何对女朋友进行恶作剧

; right: 0; transform: scaleX(-1); width: 200px;}解释一下上述代码：html { position: relative; }：设置 HTML 文档中其他元素的定位上下文...img.spider { ... }：选择类名为 "spider" 的 img 元素。position: absolute;：将蜘蛛动图绝对定位在 HTML 文档中。...运行结果：第 2 步：设计蜘蛛爬行定义一个关键帧动画，用于控制蜘蛛的水平移动效果，代码如下所示：css@keyframes spiderMovement { 0% { right: 0; }...接着，将上述动画效果写入刚刚的 CSS 样式中，代码如下所示：cssimg.spider { ......：代码图片上传的是公共图床，所以可能存在不稳定性，也可以访问博主的 GitHub 获取图片。

4960 0

🎉中秋佳节：简单实现月饼雨

这个div元素是相对定位的，并且它的宽度是100%，高度是视口的100%，超过视口的部分会被隐藏（由于overflow: hidden）。...CSS样式CSS部分定义了一个名为redpacket的类，这个类的元素是绝对定位的，初始时在顶部（-100px），在页面中心（通过left: calc(50% - 50px)计算得出），宽100px，高自动...createRedPacket函数：这个函数创建一个新的元素（一个图像元素），类名为“redpacket”，然后随机设置它在页面上的位置（在窗口宽度减去100px和元素宽度的中间位置），并给它一个随机的阴影效果...最后，这个新创建的元素被添加到id为“redpacket-container”的元素中。...视觉效果整体上，这段代码的视觉效果应该是页面上不断下落并旋转的月饼图像，这些月饼图像会以不同的颜色和位置出现。总结--通过编写代码实现月饼雨效果，我们可以在中秋佳节期间为网页增添一些趣味和节日氛围。

5642 0

超全整理前端开发面试题——CSS篇（2016年）

:relative; //相对定位 background-color:pink; //方便看效果 left:50%; top:50%; } 让绝对定位的div居中...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。...：）用纯CSS创建一个三角形的原理是什么？...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？） ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

3.2K13 0

104道 CSS 面试题，助你查漏补缺（上）

fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其元素本身所在正常位置进行定位。 static 默认值。...23.绝对定位元素与非绝对定位元素的百分比计算的区别绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的padding box来计算的。...非绝对定位元素的宽高百分比则是相对于父元素的content box来计算的。 24.简单介绍使用图片 base64 编码的优点和缺点。...一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些属性时也会创建BFC。...-和-width100的区别 [23] 23.绝对定位元素与非绝对定位元素的百分比计算的区别: #23绝对定位元素与非绝对定位元素的百分比计算的区别 [24] 24.简单介绍使用图片 base64 编码的优点和缺点

2.9K1 0

求职 | 史上最全的web前端面试题汇总及答案

② absolute absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。...fixed fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。 relative relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。...（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）描述CSS Reset的作用和用途。...• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。...文档树，css文件，js文件，图片资源等），执行的一个函数问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响 ②$(document).ready

2.5K1 0

前端面试实录CSS篇（最近一周）

当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...，任何设备的物理像素都是固定的 • 像素px: 页面布局基础，分为css 像素和物理像素 • 百分比%: 实现响应式效果 • em和rem: 相对于 px 更具灵活性，它们都是相对长度单位，区别为，em...• absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 • relative: 相对定位元素的定位是相对其正常位置 • fixed: 元素的位置相对于浏览器窗口是固定位置...• 1px 问题的本质：在一些 Retina 屏幕上，移动端页面的 1px 会变得很粗，所呈现出来不止是 1px 的效果，原因就是 CSS 中的 1px 不能和移动端的 1px 划等号，他们之间是有一个比例关系...然后动态的设置 CSS 属性中的值，以此来达到 1px 的效果。

9231 0

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

CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 ) 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 ) 【CSS...摆放布局 , 没有任何边偏移的效果 ; 在使用定位时 , 几乎不适用静态定位 ; 6、相对定位相对定位是盒子模型相对于其在标准流中的位置设置的 ; 如 : 盒子模型在标准流...父级元素为基准 , 设置边偏移 ; 为子元素添加绝对定位 , 如果父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申..., 如果父容器没有定位 , 则查找父容器的父容器是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述父容器的定位不一定是绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是...的父级元素没有定位 , 那么会一直向上查找有定位的父级元素 , 直到浏览器 ; 绝对定位元素不保留原来的位置 , 是完全脱离标准流的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位

4K1 0

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

如果你想让这个div #demo里的一个div #sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。...实测，在Chrome中有效果，在IE9以及Fire Fox中没有效果。 8.js（JavaScript）中单引号和双引号有什么区别？一个Web大神告诉我说没什么区别，我实验了，还没发现有什么区别？...浏览器有一个内置的间隔，所以即使你设置interval为0,定时器也会间隔一段时间之后再执行。 10.CSS中默认定位，相对定位，绝对定位，固定定位的区别？...相对定位： position:relative。定位的参考对象是元素自己；且不脱离文档流，即默认定位所占用的位置还保留，会撑开父容器；绝对定位： position:absolute。...定位的参考对象是离自己最近的非static定位的父元素。脱离文档流，不会撑开父容器。固定定位： position:fixed。生成绝对定位的元素，相对于浏览器窗口进行定位。

2.1K2 0

CSS笔记(14)

CSS定位为什么需要定位? 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子....值语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 2.边偏移边偏移就是定位的盒子移动到最终位置,有 top, bottom,...如果祖先元素有定位(相对/绝对/固定),则以最近一级的有定位祖先元素为参考点移动位置. 绝对定位会脱标,不会保留原来的位置....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位和固定定位的混合语法: 选择器 { position : sticky ; } 以浏览器的可视窗口为参照点移动像素(固定定位特点...定位拓展: 绝对定位和固定定位也和浮动类似. 行内元素添加绝对或固定定位,可以直接设置高度和宽度.

1.2K1 0

每天10个前端小知识【Day 18】

核心的css代码结构如下： position: relative：为伪元素绝对定位 overflow: hidden：文本溢出限定的宽度就隐藏内容） position: absolute：给省略号绝对定位...因此，CSS加载是会阻塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：解析HTML时，如果遇到img或picture标签，将会加载图片解析加载的样式，遇到background-image时

2.9K1 0

前端面试题2（CSS）

规则如下：两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠创建了块级格式化上下文的元素...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。...Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？...双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。...可以参考面向对象的CSS 元素竖向的百分比设定是相对于容器的高度吗？元素竖向的百分比设定是相对于容器的宽度，而不是高度全屏滚动的原理是什么？用到了CSS的那些属性？

4.3K1 1

我们共成长 | CSS学习笔记分享

选择器通常是您需要改变样式的 HTML元素。每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。...三 CSS基本使用 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果...元素设置为浮动以后，会生成一个块级元素，我们可以用浮动的特性来进行一些布局。 ②Position定位页面布局使用最多的是相对定位（relative）和绝对定位（absolute）。...偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。...绝对定位：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果。

5952 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭