开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我调整窗口大小时，绝对定位的div并不总是固定为底零

当调整窗口大小时，绝对定位的div并不总是固定为底零，这通常是由于div的定位上下文（positioning context）或者其父元素的尺寸变化导致的。以下是涉及的基础概念、可能的原因以及解决方案：

基础概念

绝对定位（Absolute Positioning）：元素相对于最近的非static定位的祖先元素进行定位。
定位上下文：决定绝对定位元素参照的最近的已定位（非static）祖先元素。

可能的原因

父元素没有设置定位：如果父元素没有设置为relative、absolute、fixed或sticky，绝对定位的div会相对于整个文档定位。
父元素尺寸变化：当窗口大小改变时，如果父元素的尺寸发生变化，可能会影响子元素的定位。
CSS属性设置不当：如bottom属性没有正确设置为0，或者存在其他CSS属性影响布局。

解决方案

确保父元素具有适当的定位，并且div正确地相对于父元素定位。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning Example</title>
<style>
  .container {
    position: relative; /* 设置父元素为相对定位 */
    width: 100%;
    height: 100vh; /* 确保父元素高度占满视口 */
  }
  .fixed-bottom-div {
    position: absolute;
    bottom: 0; /* 固定到底部 */
    width: 100%;
    background-color: lightblue;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="fixed-bottom-div">
    This div stays at the bottom.
  </div>
</div>

</body>
</html>

关键点

父元素定位：确保父元素使用position: relative;或其他定位方式。
高度设置：父元素需要有明确的高度，例如使用height: 100vh;来占满整个视口高度。
子元素定位：子元素使用position: absolute;并设置bottom: 0;来固定在底部。

通过以上设置，无论窗口如何调整大小，绝对定位的div都会保持在视口的底部。如果问题仍然存在，可能需要检查是否有其他CSS规则或JavaScript代码影响了布局。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端学习(14)~css学习(八)：定位属性

-- 相对定位 --> position: fixed; 定位 --> 相对定位相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。...（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。...工程应用： “子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。...（3）绝对定位的儿子，无视参考的那个盒子的padding：下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。...此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位： ?

9282 0

完美解决footer固定在底部

很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况： ?...导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白；但是我们又希望footer能在窗口最底端。...今天给大家介绍两种方法来完美解决这个问题：方法一：footer高度固定+绝对定位思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom...{ /*保证footer是相对于co ntainer位置绝对定位*/ position:relative; width:100%; min-height:100%; /*...>FOOTER div> CSS代码：我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：（1）flex-grow

3.7K1 0

虚拟运营商：2015定生死

从大的方面说，国家鼓励民企进入电信业，但却缺乏有效的监管和统一的发展标准，导致各行其道；其次，具体到市场行为方面，基础运营商与虚拟运营商之间的合作缺乏标准监督，‘批零倒挂’的问题依然严重，这成为阻碍虚拟运营商诞生至今最大的拦路虎...不过，从协议内容来看，仅是有望联动调整，并非针对批零倒挂而统一规定转售批发价格政策。...商业模式未成型目前，国家已暂时关闭了转售业务的申请窗口，现有41家虚拟运营商五花八门，涉及数十个行业。是否存在竞争？答案是肯定的。而如何生存备受业界关注。...对此，鹏博士常务副总裁、负责转售业务的吴少岩对腾讯科技表示，“我们的试点期最短，但我们是唯一一家做固网宽带的企业，固网融合产品是我们的定位。...同样，他也强调，固网的批零倒挂问题也亟待解决。对于虚拟运营商的商业模式，41家几乎没有完全一样的，这也注定各家划地为牢，难有良好产业环境。

5683 0

【说站】css中position常见的四个属性值

一般来说，我们不需要特别声明它，但有时当我们遇到继承时，我们不愿意看到元素继承的属性影响本身，所以我们可以使用Position:static取消继承，即恢复元素定位的默认值。...设置为static的元素总是位于页面流给出的位置(static元素会忽略任何top、bottom、left或right声明)。一般不常用。 2、relative相对定位。...3、absolute绝对定位。设定为absolute元素，如果其父容器设定为position属性，并且position属性值为absolute或relative，则根据父容器进行偏移。...请注意，设定absolute属性的元素在标准流中不占位置。 4、fixed固定定位。位置设置为fixed元素，可以定位为与浏览器窗口相比的指定坐标。无论窗口是否滚动，元素都会留在那个位置。...它总是基于body。注意设置fixed属性的元素在标准流中不占位置。以上就是css中position常见的四个属性值，希望对大家有所帮助。

8473 0

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

，比如某张图片本来居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时就可结合 max-width 来实现。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...absolute 另外，有点需要注意下，绝对定位的元素，因为其已经从文档流中抽离，因此就不存在什么行内元素、块级元素的限制了。大小就是根据设置的宽高、位置就是根据参考点进行调整后进行布局绘制。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。

1.6K3 0

大屏页面按需解决适配问题

页面结构一个整页的静态背景图，一个头部标题图，中间六边形图，和下面会动的光圈(代码实现的旋转效果)，六边形左右是四个树形图初版实现方式页面的头部很简单，背景图和标题水平居中，两个条件区域使用绝对定位靠左靠右分别处理根据...UI提供的切图，先把六边形图和下面的一个静态背景图和动态光圈位置固定为水平居中，调整上下边距，实现整体在屏幕中的位置相对合适基于六边形图的位置，把左右四个树形图定位上去最后把文字基于图片位置定位写上去就行了遇到的问题...，解决方案位置异常刚开始做完以后在PC屏幕上看着正常，在浏览器 tab 页签下看的效果，由于是大屏项目，使用F11全屏看了一下效果后，发现六边形这部分固定设置的 top 值，在全屏模式下导致整体内容太靠上了由于使用的绝对定位...把中间部分的内容全部放到 div 中，然后设置整个 div 水平垂直居中，这样整体效果不管是电脑屏幕，还是全屏模式看着都在中间位置了内容重叠笔记本上浏览右上角内容重叠了由于中间部分图片都是静态宽高，图片和文字的内容都是根据相对定位进行的处理...，则默认缩放比例为 100%，如果屏幕宽度小于多少，分别设置 90%, 80% 等对应的比例由于我们用浏览器开发，如果用户手动改变浏览器窗口的大小，通过监听浏览器窗口变化，动态调整缩放比例，这样的效果就能满足大部分场景了注意

1661 1

css笔记

相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位静态定位(static) 静态定位是所有元素的默认定位方式...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。...它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。...垂直对齐结束位置底对齐 5、flex-wrap控制是否换行当我们子盒子内容宽度多于父盒子的时候如何处理值描述 nowrap 默认值。规定灵活的项目不拆行或不拆列。

7.7K5 0

《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法By css上卷

4.1大致步骤 1.访问度娘首页。 2.通过CSS定位到元素，点击一下。...4.2绝对路径定位方式顾名思义，将 CSS 表达式从 html 的最外层节点，逐层填写，最后定位到操作元素，此方法最为简单，具体格式为： xxx.By.cssSelector("绝对路径") 具体例子...： xxx.By.cssSelector("html > body > div >input[value="查询"]") CSS定位表达式使用绝对路径定位属性value的值为“查询”的页面元素。...，当页面元素位置发生改变时，都需要修改，因此，并不推荐使用绝对路径的写法。...如下图所示： image.png 6.拓展 6.1使用浏览器调试工具，可以直接获取CSS语句这个主要是针对不会或者不熟悉CSS语法的小伙伴或者童鞋们宏哥提供的一种方法，其实CSS的语法很简单的，几个小时就可以搞定的

1.4K4 0

css中绝对定位_绝对定位和相对定位怎么用

用途 1.微调元素位置 2.做绝对定位的参考（父相子绝） *{ padding: 0; margin: 0; } div{...单独盒子绝对定位参考点： 1.top属性描述, 是以页面的左上角，并不是body，而是页面html左上角为参考点来调整位置。...父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。父绝子绝，因为绝对定位脱离标准流，影响页面的布局。父相子绝是常用的布局方案。...（如果父辈有边框，则以内沿边界为起点）绝对定位的盒子无视父辈的padding。 div class="box2"> div> div> 上一层没有再往上找：绝对定位水平居中设置绝对定位之后

2.6K3 0

前端成神之路-定位

当我们滚动窗口的时候，盒子是固定屏幕某个位置的 ?...3.2.4 固定定位(fixed) - 重要固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形完全脱标 —— 完全不占位置；只认浏览器的可视窗口...哈根达斯分析一个大的 div 中包含 3 张图片；大的 div 水平居中； 2 张小图片重叠在广告图片上方 —— 脱标，不占位置，需要使用绝对定位； 2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置...加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示： ?...类似，并不完全一样，因为浮动是脱标的）绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

1.9K2 0

《手把手教你》系列技巧篇（十四）-java+ selenium自动化测试-元素定位大法之By xpath上卷（详细教程）

5.1大致步骤 1.访问度娘首页。 2.通过xpath定位到元素，点击一下。...5.2绝对路径定位方式顾名思义，将 Xpath 表达式从 html 的最外层节点，逐层填写，最后定位到操作元素，此方法最为简单，具体格式为： xxx.By.xpath("绝对路径") 具体例子： xxx.By.xpath...，都需要修改，因此，并不推荐使用绝对路径的写法。.../input[x]") 定位第x个input标签,[x]可以省略，默认为第一个相对路径的长度和开始位置并不受限制，也可以采取以下方法 xxx.By.xpath("//div[x]/form[x]/input...的语法很简单的，几个小时就可以搞定的。

1.3K3 0

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

这样看效果和绝对定位完全一致，但是固定定位的定位上下文是浏览器窗口，她并不会随页面滚动。以下是使用相对定位和固定定位的图示： ? ?...不过，如果把他相应的元素设定为 relative，绝对定位元素的任何祖先元素都可以成为它的定位上下文。...这里内部和外部的 div 都是是静态定位，不存在谁是谁的定位上下文这个问题，所以 top 和 left 属性并没有生效。下面我们把内部 div 设定为绝对定位，来看一下变化。...外部 div 改为相对定位之后，后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位。此时内部 div的 top 和 left 属性参照的就是外部 div。...把元素的 visibility 设定为 hidden，元素会隐藏，但它占据的空间仍然存在。

6591 0

【CSS】202-23个CSS垂直居中技巧汇总

谁说绝对定位要少用？...Amos认为没有少用多用的问题，重点在于你是否有妥善运用才是重点，绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了...又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了...，这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与...在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-

1.1K3 0

CSS 中你需要知道 auto 的一切！

这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。我们可以使用下面方法让具有绝对定位元素居中：设置的宽度和高度。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。根据MDN：取决于用户代理。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。...好吧，原因是绝对定位的元素相对于其最接近的父元素具有position：relative。该父项具有padding: 16px，因此子项位于顶部和左侧的16px处。有趣，不是吗？

5.5K3 0

CSS入门？一篇就够了！

相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位静态定位(static) 静态定位是所有元素的默认定位方式...固定定位fixed(认死理型) 固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。...在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。...去除图片底侧空白缝隙有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

5.2K2 0

关于定位position的相关知识

HTML5学堂 - 刘国利：最近有好几个学生和自己聊起，总觉得定位有点懵。因此在本文中，主要书写了相对定位relative和绝对定位absolute，定位的用法以及叠层后的层级关系计算方法。...设置绝对定位的元素，会脱离文档流，如下例子定位设置属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。...fixed的定位方式 fixed可定位相对于浏览器窗口的指定坐标.这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口滚动与否，元素都会留在那个位置。...拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。z-index只能针对同级的标签有效，也就是说子标签的z-index值对于父标签是无效的，因为两者的级别不同z-index是无法比较的。

9415 0

WEB入门.七 CSS布局模型

本章简介上一章节讲解了盒子模型以及页面元素定位，理解了绝对定位、相对定位、包含块三者之间的关系以及应用场合。...例如：绝对定位的页面元素会脱离标准文档流，通过指定的坐标位置进行定位；相对定位则不脱离标准文档流，只是相对于元素原有的位置进行偏移，不挤压其他页面元素。设计师可以通过定位盒子来完成基本的页面布局设计。...这与使用绝对定位的页面元素相比有明显不同。绝对定位的页面元素被完全从文档流中移除，图片出现在文字的上方，其元素不会影响其他元素。浮动定位的元素仍留在文档流中。...图3.1.21 并列层布局三列布局样式比较多，可根据页面需要适当调整布局形式。例如，可以将三列均采取绝对定位，固定左右列宽度，中间列根据内容自适应。...绝对定位元素始终停留在文档流中 4.以下哪种元素定位方式会脱离标准文档流（）。 A. 绝对定位 B. 相对定位 C. 浮动定位 D.

1161 0

CSS定位之position详解

position属性在前端中，position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。它有几个常用的属性： static 默认值。...relative 相对定位。相对于原本自己的位置，其他的元素样式不会发生改变。 position 绝对定位。...span-3" style="background-color:green;padding:10px;">3 absolute 这个属性比较复杂，看属性的名字是绝对定位...它也是一种相对定位，不过相对的不再是自己，而是父元素。具体是哪个父元素，就要看父元素是否应用了position属性。举个例子，最开始我们有3个嵌套的div ?...fixed 这个就比较容易理解了，它是相对浏览器的窗口进行定位。比如博客园的推荐按钮，或者导航，都可以应用这个position样式。

7986 0

如何做一个让人闻风丧胆的H5

回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一些坑，所以让我进入正题吧。...有些乍一看好像是用 position 定位，分别写 top 值就好。殊不知，设计师真正要表达的是，作为一个整体，它们在页面上要绝对居中。没有 get 到这个 point，兼容的时候就要哭了。...transform 属性应用到元素的过程其实是矩阵变换的过程，在渲染的时候，元素的坐标就会被确定下来，然后和 transform 的属性值进行矩阵运算得到最终的坐标，不过你会发现，一个绝对定位的元素通过...下面这段是外层容器的样式，背景是定义在 switch-wh 动画中，通过绝对定位让浏览器自行计算，保证容器大小占满整个屏幕： ?...雪碧图是把各种小图拼合到一张大图上面，通过 width、height 和 background-position 定位到图片，看下图可以发现相邻图片的边界也一起显示出来了。

1.3K6 1

html笔记

绝对定位 position: absolute; 绝对定位就是先移动到提供的位置来定义自己的位置 div> 没有绝对定位的时候，盒子默认会在左上角当使用绝对定位，给盒子定义的是 bottom（下）与right（右），那么盒子会先跑到右下角，然后再基于右边...200px 固定定位这个很好理解了，就好比窗口某个小广告无论你怎么更改页面大小或者滚动他始终在一个位置跟着你跑 div> 首先固定定位它的位置定义是基于绝对定位的，当我上面代码中给他设置right（右）与 bottom（下）的时候，他就和绝对定位一样会先跑道右下角...来调整布局盒子默认定位顺序是后面的代码压住前面的代码，通过这个就可以调整顺序演示一下基本的三个盒子浮动且代码顺序依次盖住 #test1, #test2, #test3 { width:

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭