position定位解决弹框拖拽出屏幕的情况

position定位有四种情况：

1 static默认情况，没有定位，元素正常出现在文档流中。

2 fixed 绝对定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：定位脱离文档流，不占据位置。

3 relative相对定位，相对其正常位置，还在文档流中，占据位置。

相对定位元素经常被用来作为绝对定位元素的容器块。

4 absolute绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

定位脱离文档流，不占据空间，可以重叠在其他元素的上面。

工作中的例子：弹框拖拽出屏幕的情况

工作中，有可能会遇到弹框拖拽出屏幕的情况，可能是弹框定位不是fixed。把定位修改为fixed即可，使之相对于浏览器定位。

时间： 2024-10-14 18:33:54

position定位解决弹框拖拽出屏幕的情况的相关文章

vue拖拽插件（弹框拖拽）

// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model="tags" :move="getdata" @update="datadragEnd"> <transition-group> <div class="testdiv" v-for="eleme

1：完成留言效果 2：完成拖动标题控制弹框拖拽 3 : 给弹框添加一个自定义的右键菜单

css部分 *{ margin: 0; padding: 0;}body,html{ width: 100%; height: 100%; position: relative;}li{ margin-top: 10px; list-style: none; border-bottom: 1px dashed #ccc;}#box{ width: 500px; border: 2px solid #ccc; padding: 30px;}#btn{ margin-top: 20px; margi

jquery实战——弹出框拖拽效果

今天主要记录一下弹出框拖拽效果: 一.移动弹出窗口的步骤是:按下鼠标左键——移动鼠标——松开鼠标左键停止移动 二.主要思想: 按下鼠标左键:$('div').mousedown(function(e){}) 移动鼠标,获取鼠标当前坐标值:$(document).mousemove(function(e){}) 松开鼠标左键停止移动:$('div').mouseup(function(e){ $(document).unbind('mousemove');  //即当鼠标左键被释放时解除mouse

0188 案例：模态框拖拽

弹出框,我们也称为模态框. ? 1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层. ? 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. ? 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. ? 4.鼠标松开,可以停止拖动模态框移动 1.1.5 模态框拖拽案例分析 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动, 之后松开

draggable与overflow同时存在,无法拖拽出父元素问题解决

在使用jquery-ui的拖拽功能对列表内的选项拖拽时,发现无法将选项拖拽出列表的范围,一出范围就自动隐藏在列表下,查找到最后的原因是css中的overflow的原因,overflow存在则不能将选项拖拽出列表,解决办法 $('ul li').draggable({ zIndex:999,//zIndex主要是让选项在上层显示出来 helper:'clone', revert:'invalid', appendTo:'body'//加上这句就可以将选项拖拽出来 }); 以上仅作总结.

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切换到聊天界面,而且用户头像会移动到聊天界面的右上角.整个动画弹性十足,效果很震撼. 效果演示:http://www.htmleaf.com/Demo/201506031963.html 下载地址:http://www.htmleaf.com/html5/SVG/201506031962.html

百度地图之地址解析和浏览器定位以及添加可拖拽标注

这里的百度地图demo包括了常见的:地址解析.浏览器定位.IP定位.可拖拽标注 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <script type="tex

Android提升篇系列：在小米Note等机型上因定位权限导致的定位请求弹框

近期项目中接入百度定位,奇怪的发现在小米Note机型上每当第二次进入app时会出现定位请求弹出框, 在小米3等机型上会不可预期出现定位请求弹出框."正在尝试 通过网络或者卫星对您的手机进行定位". 很影响用户体验. 一开始误以为app中因为触发定位导致的定位请求弹出框,但仔细查验后,发现实际上还并未触发实际的定位请求. 最后通过与其他app反解后横向对比,发现因定位精度权限设置的不同引起. 最后,将项目中的定位权限由 <uses-permission android:name=&

IE8利用setCapture和releaseCapture解决iframe的拖拽事件

最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCapture来解决. sideDragBar.on('mousedown.sideMenu', function(e){ this.setCapture && this.setCapture();// ie下可以使用setCapture来解决object拖拽问题 startDragging(e);