首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

调整div窗口的大小时,div不会回到原来的位置

在前端开发中,调整div窗口大小时,div不会回到原来的位置可能是由于CSS中的定位属性和布局方式导致的。以下是一些可能的原因和解决方法:

  1. 定位属性问题:如果div使用了绝对定位(position: absolute)或固定定位(position: fixed),则调整窗口大小时div不会回到原来的位置。这是因为绝对定位和固定定位是相对于其最近的具有定位属性(position: relative、position: absolute或position: fixed)的父元素进行定位的。解决方法是使用相对定位(position: relative)或静态定位(position: static)来确保div相对于文档流进行定位。
  2. 布局方式问题:如果div使用了浮动(float)或弹性布局(flexbox),则调整窗口大小时div可能不会回到原来的位置。这是因为浮动和弹性布局会根据可用空间重新计算元素的位置。解决方法是使用其他布局方式,如网格布局(grid)或传统的块级布局(block)。
  3. 响应式设计问题:如果div没有经过适当的响应式设计,即没有针对不同的屏幕尺寸和设备进行布局调整,那么调整窗口大小时div可能会出现位置偏移。解决方法是使用媒体查询(media queries)和CSS的响应式技术来适应不同的屏幕尺寸和设备。

总结起来,要解决div调整窗口大小不回到原来位置的问题,需要检查和调整CSS中的定位属性、布局方式和响应式设计。具体的解决方法需要根据具体的代码和布局情况进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

-- 固定定位 --> 相对定位 相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。...{ position: relative;/*相对定位:相对于自己原来的位置*/ left: 50px;/*横坐标:正值表示向右偏移,负值表示向左偏移*/...相对定位不脱标 相对定位:不脱标,老家留坑,别人不会把它的位置挤走。 也就是说,相对定位的真实位置还在老家,只不过影子出去了,可以到处飘。...我们可以总结成一个公式: left:50%; margin-left:负的宽度的一半 固定定位 固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。 备注:IE6不兼容。...用途1:网页右下角的“返回到顶部” 比如我们经常看到的网页右下角显示的“返回到顶部”,就可以固定定位。

92820

JQuery EasyUI window 用法

> div> 属性及方法说明 Window需要依存于以下的三个组件: * 可拖放(Draggable) * 调整大小(Resizable) * 面板(panel) 下面来介绍Window的具体用法...,窗口的阴影也将显示。...width: 新的宽度 height: 新的高度 onMove left,top 当面板移动之后触发 left: 新的左侧位置 top: 新的顶部位置 onMaximize none 当窗口最大化的时候被触发...onRestore none 当窗口恢复到原来的大小时被触发 onMinimize none 当窗口最小化的时候被触发                       方法 名字 参数 描述 options...top: 新面板的顶部位置 move options 移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置 top: 新面板的顶部位置 发布者:全栈程序员栈长,转载请注明出处

1.2K20
  • 前端基础之CSS_2

    是相对的,它的上下左右有时候只能有2处可以确定,另外2边由于没有参照不会有间隔,所以使用时候一般不会全部上下左右都写上。...有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。...--相对移动,不脱离文档流,也就是标签移动后,原来的位置还保留着,--> 不会有其他的标签填补。...固定定位(fixed) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。...在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 <!

    41710

    可视化大屏的几种屏幕适配方案,总有一种是你需要的

    假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一...这个是最简单的方案了,相当于不适配屏幕,画布配置了多大实际就是多大,不随屏幕的变化而变化,所以各个组件的宽高也是在配置后不会改变,一般用于尺寸固定且后期不会改变的可视化大屏。...> 判断窗口宽度和高度是否大于画布的宽高,是的话通过left或top来调整: 自适应宽度 即宽度适应屏幕,高度不变,这种方案的缺点是垂直方向上会出现滚动条。...实际项目中如果有大屏需要适应屏幕,我一般都通过这种方法,优点是简单,缺点是水平或垂直空间上可能会留白,但是背景是全屏的,所以效果也不会很差。...: red; position: absolute; left: 50px; top: 50px;">div> 我们想要动态根据这个div大小和位置复制一个div: div ref="el2"

    3.2K41

    手把手教你超可爱的导航栏

    前期准备 虽然这个控件很小,功能也不是很多,但我们还是需要先分析一下它的结构,以及实现的功能 鼠标移入对应的列表项,底部的线会滑到相应的位置 点击相应的列表项,背景滑块会切换到所选择的列表项 div...left值, 这里通过事件委托来实现,通过获取触发事件的index属性来计算left值,当鼠标移出导航栏时,由于没有选择其他的项,所以线条需要回到原先被选中元素的位置 //鼠标移入底下的线跟着移动 slipNav.addEventListener...值 line.style.left = len + 'px'; }) //鼠标移出时底下的线回到原来的位置 slipNav.addEventListener('mouseleave', function...left值时,不会突变而是一个滑动过程噢!?...值 line.style.left = len + 'px'; }) //鼠标移出时底下的线回到原来的位置 slipNav.addEventListener

    75030

    CSS-定位(position)

    如下图所示,即是一个相对定位的效果展示: 注意: 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。...因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。 父盒子布局时,需要占有位置,因此父亲只能是 相对定位. 这就是子绝父相的由来。 的取值为fixed时,即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点: 固定定位的元素跟父亲没有任何关系,只认浏览器。...在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。

    1.5K10

    WEB入门.七 CSS布局模型

    当相对定位元素偏移后,它的原位置区域保持不变,其他元素也不会通过流动填充该元素偏移前的位置。...所谓的相对,仅指元素本身位置,对其他元素不会产生任何影响。因此,采用相对定位的元素被定义偏移位置后,不会挤占其他元素的位置,但能覆盖其他元素。...如图 3.1.33 所示 3.4.16设置框架滚动条显示——scrolling 在默认情况下,当页面的内容超出浏览器窗口的大小时,页面会自动添加滚动条以方 便用户浏览。...3.1.36 所示,与图 3.1.37 相对比,可以看到页面中的框架大 小被调整得更加协调。...3.1.37所示,与图 3.1.38 相对比,可以看到页面中的框架位 置被调整,由原来的左侧变成了居中对齐。

    11410

    【汉诺塔】小游戏开发教程

    游戏简介 汉诺塔是源于印度一个古老传说的益智游戏,传说大梵天创造世界的时候顺便搞了三根柱子,一根柱子上摞着一堆从大到小的圆环,他命令婆罗门把圆环全部移动到另一个柱子上,依旧是从大到小,且移动规则如下:...,把它们的位置都相对于浏览器窗口左上角来计算,那么满足下面的条件圆环和柱子区域即相交: 1.圆环的右侧距窗口左侧的距离大于柱子区域左侧距窗口左侧的距离、同时圆环左侧距窗口的距离小于柱子区域右侧距窗口左侧的距离...2.圆环的顶部距窗口顶部的距离小于柱子区域的底部距窗口顶部的距离、同时圆环的底部距窗口顶部的距离大于柱子区域顶部距窗口顶部的距离 翻译成代码如下: { // 检查某个圆环的位置是否在某个柱子区域内...,因为篇幅原因,本篇不会全部展开讲解,只挑一两个来浅析一下,不要走开,精彩继续。...,注意回退操作是把这一步的目标位置回到开始位置 this.historyList.push({ to: this.dragProp,

    1.9K10

    JQ事件和事件对象

    ,不会触发(增加阻止事件冒泡功能) div class="div1"> div class="div2">div> div> mouseover...,但keypress()事件只在按下键盘中任意字符键(A-Z)时触发,功能键不会触发(如shift ctrl 等)     4 event.which 指示按下的哪个键 1 ...()当调整窗口大小时触发的事件 //小案例(当滚动到一定高度出现搜索菜单) .bar{ width: 100%; height: 50px; background...event.pageX/event.pageY   鼠标相对于文件左侧和顶部的位置   //会随着滚动条变化而变化           //screenX/screenY  获取显示器屏幕位置的坐标...//整个屏幕的高度    不会随着滚动条变化而变化          //clientX/clientY  获取相当于页面视口的坐标 //除去上下窗口      不会随着滚动条变化而变化 <script

    4.1K20

    前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    ,也就意味着没有独占一行之说,也不再占用原来的位置(不会把父元素撑大)-----浮动的元素会造成父标签塌陷 .c1{ float: left; 浮动之后就相当于浮起来了,脱离了文档流,有多大就多大...相对定位 相对于标签自身原来的位置做一个定位 绝对定位 ​ 相对于已经定位过的父标签做一个定位(购物车展开)*** ​ 当只给你一个父标签的属性让你做定位时,就用绝对定位 固定定位 ​ 相对于浏览器窗口...,一直固定在某个位置(回到顶部) 所有标签默认都是静态的,无法直接调节位置 div{ position: static; 默认值,静态的,top、left无法改变位置 position...right: 60px; } 想用绝对定位一定要先让父元素定位(position: relative; 不用指定 top 、left等,不会影响父元素位置),自身再postion: abosulte...--只要比上一个大,就在上面--> <!

    1.5K20

    WEB入门.七 CSS布局模型

    当相对定位元素偏移后,它的原位置区域保持不变,其他元素也不会通过流动填充该元素偏移前的位置。...所谓的相对,仅指元素本身位置,对其他元素不会产生任何影响。因此,采用相对定位的元素被定义偏移位置后,不会挤占其他元素的位置,但能覆盖其他元素。...如图 3.1.33 所示 3.4.16设置框架滚动条显示——scrolling 在默认情况下,当页面的内容超出浏览器窗口的大小时,页面会自动添加滚动条以方 便用户浏览。...3.1.36 所示,与图 3.1.37 相对比,可以看到页面中的框架大 小被调整得更加协调。...3.1.37所示,与图 3.1.38 相对比,可以看到页面中的框架位 置被调整,由原来的左侧变成了居中对齐。

    9710

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

    ,比如某张图片本来居中显示,但当窗口缩小到比图片还小时,图片就根据窗口进行缩小,此时就可结合 max-width 来实现。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素,而是相对于该元素原本所应该在的位置作为参考点。...如果使用了 top 来调整位置,那么参考点就是参考元素的左上角 如果使用了 bottom 来调整位置,那么参考点就是参考元素首屏页面的左下角 为什么强调首屏,因为参考元素的大小可能是超出一个屏幕的,bottom...而会发生元素重叠的现象也就只有使用了 position 调整了元素的位置,以及浮动元素两种场景。...正常的文档流方式布局绘制元素是不会出现元素重叠,当然如果是嵌套的元素,层级关系也早就确定了,也没必要通过这个属性来调整了。

    1.6K30

    「走马灯」动画效果实战

    需求分析 我们先来弄清楚我们要实现的是怎样的动画效果,是走马灯吗?是弹幕吗?看着像瀑布流?...,如字体颜色,背景等等,要注意是元素盒子的准备和flex布局;准备一个窗口盒子,和一个词条盒子,词条盒子中有两个一模一样的子盒子,要注意子盒子宽度要比窗口盒子大,且词条盒子宽带是子盒子的2倍(刚好装下两个子盒子...),子盒子内词条flex布局; 第二步:实现动画 考虑到上篇文章不同动画实现方案的比较,我们考虑能用css实现的就用css实现; 动画要无限向左滚动,但要注意我们并可能真的让一个元素很宽...,然后从当前位置一直向左移动到无穷远,我们的思路是从当前位置左移动到半个词条盒子的距离(一个子盒子的距离),然后立即回到最初位置继续循环一次动画; 两个步骤的思路说完,具体代码见最下方;...代码实现 HTML div class="wrapper"> div class="wrapper__box-wrapper" > div

    83800

    前端(二)-CSS

    --清除这个元素两边的浮动--> } 6、定位 posotion属性 6.1 relative 相对定位 相对自身原来位置进行偏移,偏移设置:top、left、right、bottom; 相对定位的规律...1.设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置 ; 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响 ; 3.设置相对定位的盒子原来的位置会被保留下来...; 4.浮动后,相对定位,相对于盒子浮动后的位置,进行定位,盒子原始位置不会保留; 6.2 absolute 绝对定位 absolute属性值:偏移设置: left、right、top、bottom...,这意味着它们对其他元素的定位不会造成影响 ; 4.元素位置发生偏移后,它原来的位置不会被保留下来; 5.一般定位都是相对定位和绝对定位配合使用,父级元素先相对定位,子元素再绝对定位; 使用场景...,而是浏览器窗口; 使用场景:在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等; 6.4 z-index属性 调整元素定位时重叠层的上下位置 ; 1.z-index属性值:整数,默认值为

    1.9K20

    妙啊!纯 CSS 实现拼图游戏

    最难的是,基于(2),拖拽元素后释放,只有释放在特定的位置,元素才会固定到新位置,否则,返回到原先的位置 Oh No,上面的 (2)、(3) 怎么看也不像是单纯的 CSS 能解决的问题。...我们来看这样一个例子,如果有一个元素,已经偏移了 translate(120px, 120px),我们 hover 这个元素的时候,让它回到原来的位置: div { transform: translate...,失去了 hover 的状态,又变回了原来状态,然后又重新触发了 hover 状态,如此反复,所以会看到剧烈的跳动 那,有没有办法让它复位了就不再跳回来呢?...可以的,我们可以通过设置一个非常大的 transition-duraiotn 和一个非常大的 transition-delay,让整个过渡效果变得非常缓慢,慢到我们察觉不到: div { transform...0); transition: 0s; } 如此一来,元素复位了之后,就再也不会跳回来了(理论上): 如果,我们把上述的 transition: 999999s 999999s,也就过渡持续时间与过渡延迟时间

    79420

    可能这些是你想要的H5软键盘兼容方案

    在IOS12 上,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不回到原位,导致键盘原来所在位置是空白的。...但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。 ?...当输入框位于页面下部位置时,在 IOS 上,会将 webview 整体往上滚一段距离,使得该获取焦点的输入框自动处于可视区,而在 Android 则不会这样,它只会改变页面高度,而不会去滚动到当前焦点元素到可视区...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ,就会惊奇的发现键盘收起后,原本被滚动顶起的页面并没有回到底部位置,导致原来键盘弹起的位置...微信官方已给出解决方案,只需在软键盘收起后,将页面(webview)滚回到窗口最底部位置(clientHeight位置)。

    8.1K20
    领券