首页
学习
活动
专区
工具
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:网页右下角“返回到顶部” 比如我们经常看到网页右下角显示“返回到顶部”,就可以固定定位。

92220

JQuery EasyUI window 用法

> 属性及方法说明 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
  • 可视化几种屏幕适配方案,总有一种是你需要

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

    3.1K41

    手把手教你超可爱导航栏

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

    74330

    CSS-定位(position)

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

    1.5K10

    JQ事件和事件对象

    不会触发(增加阻止事件冒泡功能) 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

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

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

    1.9K10

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

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

    1.5K20

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

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

    1.6K30

    「走马灯」动画效果实战

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

    81900

    前端(二)-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,也就过渡持续时间与过渡延迟时间

    78720

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

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

    8.1K20

    【H5】209-可能这些是你想要H5软键盘兼容方案

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

    3.9K12

    前端复习:CSS专题3

    background-attachment:fixed; 背景会被固定住,不会被滚动条滚走。...让元素相对自己原来位置,进行位置调整。 也就是说,如果一个盒子想要进行位置调整,那么就要使用相对定位。...如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应页面的左下角: 面试题: 用bottom定位时候,参考是浏览器首屏大小对应页面左下角: 5.3 以盒子为参考点 一个绝对定位元素...可以使用如下设置使其水平居中: left:50%; margin-left:负宽度一半 6 固定定位 固定定位,就是相对于浏览器窗口定位。无论页面如何滚动,这个盒子显示位置不变。...数值盖住数值小。 2、只有定位了元素,才能够有z-index值。也就是说,不管相对定位、决定定位、固定定位,都可以使用z-index值。而浮动东西不能够使用。

    84820
    领券