文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

绝对div里面的相对div位置对0不能正常工作吗？

绝对定位（absolute positioning）是一种CSS属性，用于将元素从文档流中脱离，并根据其最近的非静态定位祖先元素进行定位。相对定位（relative positioning）也是一种CSS属性，用于相对于元素在文档流中的原始位置进行定位。

当一个绝对定位的元素（绝对div）嵌套在一个相对定位的元素（相对div）中，并且相对div没有设置具体的宽度和高度时，绝对div的位置对于相对div的定位将无法正常工作。这是因为相对div的默认宽度和高度是由其内容决定的，而绝对div的定位是相对于相对div的原始位置进行计算的。

为了解决这个问题，可以给相对div设置一个具体的宽度和高度，或者使用其他布局方式来确保绝对div的位置可以正常工作。另外，还可以使用CSS的其他属性和技巧来实现更复杂的布局需求，如Flexbox布局、Grid布局等。

腾讯云相关产品和产品介绍链接地址：

相关搜索:作为位置固定的左div和footer不能正常工作云计算的利与弊云计算的重要性云计算相关技术云计算立法现状云计算简单举例云计算要学什么云计算课程报告云计算 互联网云计算 微服务
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

脱离文档流分析（转）

（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响） 问题1：浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响 浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置...分别分析一下position的几个值 （1）static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 （2）relative 相对定位。...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。          ...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层

1.3K20

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

在设置width:100%后，子元素“溢出”了父元素 【注意】宽度默认为width:auto，但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...: 于是又恢复正常了 1.4子元素浮动对width:100%无影响（这里不做展示） 2.浮动／定位对width:auto的影响 2.1默认情况下，width:auto占满一行 不做展示 2.2子元素相对定位...，无影响，仍占满一行 不做展示 3.3子元素绝对定位，固定定位，浮动，width:auto等同于width:0 将上面的style改成： .inner-auto{ position:absolute...（注意inner-auto本来是有颜色的） 此时该div的宽度已被挤压为0了，从控制台上看inner-auto: ? 所以，当我们在绝对定位，固定定位，浮动时候，要记得给元素设宽度。..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。

2.1K110

    • 【愚公系列】2023年03月 其他-Web前端基础面试题（CSS_42道）

    10、简述rem布局原理 11、解释下浮动和它的工作原理？清除浮动有哪些方式？ 12、什么是 BFC？ 13、对 CSS 的新属性有了解过的吗？ 14、讲一讲 CSS 的权重和优先级？...20、对line-height是如何理解的？ 21、元素竖向的百分比设定是相对于容器的高度吗？ 22、transition和animation的区别是什么？...line-height:0; 水平间隙，图片下方间隙都能解决 这个办法不仅可以解决图片下面的小空白，也能解决图片与图片之间的小空白 缺点是让父元素里的文字的字号和行高都变成了0，文字看不见了，需要重新定义文字的字号和行高...relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...21、元素竖向的百分比设定是相对于容器的高度吗？

    3.1K20

    CSS布局(三) 布局模型

    相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。...相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。...如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。...#div1{ position:fixed;     bottom:0;     right:0 }  (始终在屏幕由下端有一个div框，会一直跟着滚动条走) 相对定位可以和绝对定位混着使用 原则是：只要父...2.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

    2.3K71

    2018年9月9日用HTML开发网页的总结

    href属性的值可以是任何有效文档的相对或绝对URL。包括片段标识符和JavaScript代码段。...(padding的所有属性都一样) 高度宽度能继承吗？      宽度能够继承，高度不能继承。 列表前面的.能换成其他的吗？          ...边框太大对下面的东西有影响吗？ 怎么加箭头 MVC ORM? 如果字用span标签一直在底部无法调到上边，可以给字一个div,让字成为一个盒子。...##### #号中的言论待考证 如果第一个div1里面的内容高度小于或者等于本身定义的div0的高度的话，下一个div2就会自动靠下边最左边浮动 如果div1里面的内容的高度大于div1设置的高度的话...，div2的位置不会靠最左边，而是在多出内容的右下角为开头浮动，如果div设了float:left; 则在div的右边浮动。

    1.1K60

    CSS-定位(position)

    对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置） 就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。...因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 这就是子绝父相的由来。 <!...注意： z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 如果取值相同，则根据书写顺序，后来居上。 后面数字一定不能加单位。...# 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式 不可以 正常模式 相对定位relative 不脱标，占有位置 可以 相对自身位置移动（

    1.5K10

    前端基础——CSS+DIV布局

    CSS+DIV布局，就是在整体上用标记把页面分为若干个块，然后对各个块进行CSS定位，最后再在各个块中添加相应内容。        ...DIV吗?”...我否决了他，在笔者看来，网页里的许多元素，都可以看做是一个“盒子”，比如p、h1、form、div、span、table、tr、td等等，他们都有margin、border、padding属性。        ...absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

    2.3K10

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

    bottom:0px;right:0px;也就没有变化。 如果你想让这个div #demo里的一个div #sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。...浏览器有一个内置的间隔，所以即使你设置interval为0,定时器也会间隔一段时间之后再执行。 10.CSS中默认定位，相对定位，绝对定位，固定定位的区别？...就是没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明），会撑开父容器。 相对定位： position:relative。...定位的参考对象是元素自己；且不脱离文档流，即默认定位所占用的位置还保留，会撑开父容器； 绝对定位： position:absolute。定位的参考对象是离自己最近的非static定位的父元素。...生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流，不会撑开父容器。

    1.6K20

    css(2)

    1.10.2relative（相对定位，了解） 相对定位是相对于该标签原来的位置进行定位。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 1.10.3absolute（绝对定位，重要） 定义：相对于已经定位过得父标签再做定位。...另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 ?...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

    1.5K20

    网页布局基础

    原理：（浏览器宽度-外包层宽度）／2 = 外边距 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性 。...当元素没有设置宽度值，而设置了浮动属性，元素的宽度会随内容的变化而变化（若没有内容，则宽度为0）。 当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻它后面的元素，对它前面的元素没影响。...3.一旦设置相对定位，元素随即拥有偏移属性和z-index属性（设置偏移属性之后可能会产生空间的层堆叠，对后面的元素形成遮盖，如下图所示。...相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 absolute（绝对定位）和fixed（固定定位）都属于绝对定位形式 ?...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）

    1.8K20

    前端基础-CSS定位

    总结： ​ 1.工作中用的比较少，因为加了静态定位，元素也是标准流 ​ 2.偏移值对静态定位无效 使用场景：通常是将已经设置过定位的元素还原成标准流 我们以后所说的定位不包含静态定位 2.相对定位 相对于自身在标准流的位置进行定位移动...，父元素为相对定位，偏移位置相对父元素 */ right:0;/* 最右边 */ top:0;/* 最上面 */ } 总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） —父相子绝...> 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式 不可以 正常模式 相对定位relative 不脱标，占有位置 可以 相对自身位置移动...绝对定位absolute 完全脱标，不占有位置 可以 相对于定位的父级移动位置 固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置 5.定位元素的层叠效果 控制“定位”元素的叠放层级

    62320

    CSS 定位和层叠上下文

    绝对定位不是相对视口，而是相对最近的祖先定位元素。跟固定元素一样，属性 top、right、bottom 和 left 决定了元素的边缘在包含块里的位置。...它们还是围绕着被移走元素的初始位置，跟随着正常的文档流。 跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。...有时可以用这些属性调整相对元素的位置，把它挤到某个位置，但这只是相对定位的一个冷门用法。更常见的用法是使用 position: relative 给它里面的绝对定位元素创建一个包含块。...改变固定定位元素的标记位置不会产生不好的影响，但是对相对定位或绝对定位的元素来说，通常无法用改变标记位置的方法解决层叠问题。相对定位依赖于文档流，绝对定位元素依赖于它的定位祖先节点。...# 粘性定位 粘性定位（sticky positioning），是相对定位和固定定位的结合体：正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，它就会“锁定”在这个位置。

    1.4K20

    前端入门4-CSS属性样式表声明正文-CSS属性样式表

    所以，此时可以看到 div1 浮在 div2 上面的效果。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...默认的 z-index 值是0 如果大家都没有 z-index 值，或者 z-index 值一样，那么在 HTML 代码里写在后面，谁就在上面能压住别人。...也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。而浮动的元素不能用 从父现象：父亲怂了，儿子再牛逼也没用。

    1.6K30

    CSS中的vertical-align跟line-height相互作用

    那是因为「幽灵空白节点」高度行高撑开，其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方...我特意把字符x使用大字号演示了下： 换句更简单的话说就是：middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。 ?...很简单，font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。...哈，同境界模拟，我们也设置框框2的line-height值为0，于是，就会是下面这样的表现：  x-baseline 知道框框2为何又下沉了一点吗？ ?...于是，CSS代码(line-height如果是相对值，line-height:0也可以省掉)： div { font-size: 0; } ? ? ? ?

    88110

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

    px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值 rem：相对单位，可理解为root em...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...，如果没有则相对于body； 对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。...这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。 浏览器解析HTML文档，是从前往后，由外及里的。...但是，如果支持父选择器，则整个文档不能有阻塞，页面的可访问性则要大大降低。 有人可能会说，要不采取加载到哪里就渲染到哪里的策略？

    14210

    CSS3 positon定位详解（通俗易懂）

    static静态定位 默认的定位方式，不可以使用left，top，right，buttom等属性，Z—index也不能更改，完全遵循文档标准流， 正常定位（static）的效果 ...relative相对定位 相对定位可以使用top等位移属性，相对定位是相对于自己的位置进行移动。...absolute绝对定位 俗话说子绝父相，绝对定位是相对于自己的父级定位进行移动的，最常和相对定位一起搭配，如果父级没有定位那么就会对body进行参照，绝对定位是脱离标准流的。...">789 987 div1在div0里面，div1的...top就是相对于div0的顶部距离，div3的top是到body边框的距离  fixed固定定位 固定定位同样会脱离标准流，同时是相对于window窗口的定位， 固定定位演示

    45840

    知识整理之CSS篇

    positoon: relative 相对定位，相对于其正常位置进行定位，遵循常规流。并且设置top，right，bottom，left这4个属性进行偏移时，不会影响常规流中的任何元素。...transform: scale(0); 将元素设置无限缩小，元素不可见，元素所在位置被保留。 height: 0; 将元素高度设置为0，并消除边框。...示意图： image.png 解释下什么是浮动和它的工作原理？ 什么是浮动？ 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。...可以通过css3里面的动画属性scale进行缩放。 link和@import的区别 从属关系区别 @import是CSS提供的语法规则，只有导入CSS的作用。...em em，是相对长度单位，em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

    1.6K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券