-
2019-02-17 17:24:47
固定定位:position : fixed;
特点:位置不变,不占位置,只以浏览器进行定位。
相对定位:position : relative;
特点:相对于自己原来的位置进行定位,利用top,left,right,botytom 进行移动,定位后仍然占据自己原来的位置。
绝对定位:position : absolute
特点:相对于离自己最近并且已经定位的元素进行定位,利用top,left,right,botytom 进行移动,定位后不占位置。
常用定位方法:子绝父相,子div绝对定位,父div相对定位
更多相关内容 -
Vue中div contenteditable 的光标定位方法
2020-12-19 13:23:22在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后function keepLastIndex(obj) {console.log(obj)console.log...在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框
在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后
function keepLastIndex(obj) {
console.log(obj)
console.log(window.getSelection)
console.log(document.selection)
if (window.getSelection) { //ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection(); //创建range
range.selectAllChildren(obj); //range 选择obj下所有子内容
range.collapseToEnd(); //光标移至最后
} else if (document.selection) { //ie10 9 8 7 6 5
var range = document.selection.createRange(); //创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj); //range定位到obj
range.collapse(false); //光标移至最后
range.select();
}
}
在实际使用时,vue.$emit是一个异步函数,最好在调用这个定位前加上一定的延迟,经测试,5ms就可以了
setTimeout(()=>{
keepLastIndex(e.target)
},5)
以上这篇Vue中div contenteditable 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
-
DIV弹出层+定位
2013-12-24 09:59:21这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。 -
js 实现div定位
2012-03-27 10:23:11body { -moz-user-focus: ignore; -moz-user-input: disabled; -moz-user-select: none;....divall{ width:300px; float:left; border:1px solid #cccccc; margin:10px 10px 0px 0px; } .<html>
<head>
<mce:style> <!--
body {
-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;
}
.divall{
width:300px;
float:left;
border:1px solid #cccccc;
margin:10px 10px 0px 0px;
}
.divtitle{
height:20px;
border-bottom:1px solid #cccccc;
background-color:#eeeeee;
line-height: 20px;
}
.divtitle1{
float:left;
width:250px;
cursor: move;
}
.divtitle2{
float:right;
width:40px;
}
.divcontent{
height:170px;
width:300px;
}
--></mce:style><style mce_bogus="1">body {
-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;
}
.divall{
width:300px;
float:left;
border:1px solid #cccccc;
margin:10px 10px 0px 0px;
}
.divtitle{
height:20px;
border-bottom:1px solid #cccccc;
background-color:#eeeeee;
line-height: 20px;
}
.divtitle1{
float:left;
width:250px;
cursor: move;
}
.divtitle2{
float:right;
width:40px;
}
.divcontent{
height:170px;
width:300px;
}</style>
<mce:script type="text/javascript"><!--
function move(element, e) {
var target = element;
var parent = element.parentNode;
var zIndex = element.style.zIndex;
// 获取目标div的左上角坐标
var left = target.offsetLeft;
var top = target.offsetTop;
while(target = target.offsetParent){
left += target.offsetLeft;
top += target.offsetTop;
}
// 复制一个div以占据目标div的起始位置
var newObj = document.createElement("div");
newObj.innerHTML = element.innerHTML;
newObj.className = element.className;
parent.insertBefore(newObj, element);
// 将目标div改为绝对定位并赋上初使坐标值
element.style.position = "absolute";
element.style.left = left;
element.style.top = top;
element.style.zIndex = 1000;
element.style.backgroundColor = "#dddddd";
// 注册事件
if (document.addEventListener) {
document.addEventListener("mousemove", startMove, true);
document.addEventListener("mouseup", stopMove, true);
} else {
document.onmousemove = startMove;
document.onmouseup = stopMove;
}
e = e || event;
var deltaX = e.clientX - parseInt(element.style.left);
var deltaY = e.clientY - parseInt(element.style.top);
// 开始移动
function startMove(e) {
e = e || event;
element.style.left = e.clientX - deltaX + "px";
element.style.top = e.clientY - deltaY + "px";
};
// 停止移动并重新定位
function stopMove(e) {
e = e || event;
var mouseX = e.clientX;
var mouseY = e.clientY;
// 取消注册的事件
if (document.removeEventListener) {
document.removeEventListener("mousemove", startMove, true);
document.removeEventListener("mouseup", stopMove, true);
} else {
document.onmousemove = "";
document.onmouseup = "";
}
// 根据鼠标移动情况重新排序div对象
var divs = parent.childNodes;
for(var i = 0; i < divs.length; i++){
if(divs[i].tagName != "DIV")
continue;
var obj = divs[i];
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.clientWidth;
var height = obj.clientHeight;
while(obj = obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
}
// 判断鼠标松开的时候是否在某个div对象的可见区域内,如果为true,则将目标div放置到该div对象的前面
if(left <= mouseX && mouseX <= left+width && top <= mouseY && mouseY <= top+height){
parent.insertBefore(element, divs[i]);
}
}
// 将目标div改回相对定位
element.style.position = "relative";
element.style.left = "0px";
element.style.top = "0px";
element.style.zIndex = zIndex;
element.style.backgroundColor = "";
// 删除占位div对象
parent.removeChild(newObj);
};
return true;
}
function openCloseDiv(element, id){
var target = document.getElementById(id);
if(target.style.display == 'none'){
target.style.display = 'block';
element.innerHTML = '收起';
} else {
target.style.display = 'none';
element.innerHTML = '展开';
}
}
// --></mce:script>
<title>相对定位div块移动_自动排列</title>
</head>
<body onselectstart='return false;'>
<div id="mainDiv" style="width:950px;">
<div id="div1" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题1</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div1content" class="divcontent">内容1</div>
</div>
<div id="div2" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题2</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div2content" class="divcontent">内容2</div>
</div>
<div id="div3" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题3</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div3content" class="divcontent">内容3</div>
</div>
<div id="div4" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题4</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div4content" class="divcontent">内容4</div>
</div>
<div id="div5" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题5</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div5content" class="divcontent">内容5</div>
</div>
<div id="div6" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题6</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div6content" class="divcontent">内容6</div>
</div>
<div id="div7" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题7</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div7content" class="divcontent">内容7</div>
</div>
<div id="div8" class="divall">
<div class="divtitle">
<div class="divtitle1" onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题8</a></div>
<div class="divtitle2">
<div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
</div>
</div>
<div id="div8content" class="divcontent">内容8</div>
</div>
<div style="width:300px;height:190px;float:left;margin:10px 10px 0px 0px;"> </div>
<div style="clear: both;" mce_style="clear: both;"></div>
</div>
</body>
</html>
-
css将div定位到图片上的固定位置
2021-06-12 01:16:12如图我有个总的大div,宽度和高度都是不定的,里面的手机线框是背景图,用的background-size:contain定位的,黑框是我想要操作的div,想让他能覆盖手机模型的屏幕,而且放大缩小都会刚好限制在手机屏幕内,该怎么...如图我有个总的大div,宽度和高度都是不定的,里面的手机线框是背景图,用的
background-size:contain
定位的,黑框是我想要操作的div,想让他能覆盖手机模型的屏幕,而且放大缩小都会刚好限制在手机屏幕内,该怎么定位呢,能不能实现?
谢邀,这种东西根本不需要啥背景图。
写了个demo,点开看css代码和直接预览效果。
https://jsfiddle.net/vpgL5535/
我理解的话,“放大缩小都会刚好限制在手机屏幕内”指的是宽度适应,如果是要用图片背景的话,可以考虑用百分比布局。 参考代码如下(略去不重要的部分):
<div class="frame-container">
<div class="screen-container">
<!-- content here -->
</div>
</div>
.frame-container{
max-width: 559px;
min-height: 753px;
padding: 13.77% 14.13% 0;
background: url(frame.jpg) no-repeat;
background-size: 100% auto;
box-sizing: border-box;
}
.screen-container{
padding: 10px; /* 可选,在屏幕范围内仍然增加一点间距比较美观 */
}
对应的结果是:
其中的要点是:
background-size: 100% auto;
来使背景图始终缩放至宽度和外层div一致,并保持宽高比。
padding: 13.77% 14.13% 0;
取的分别是手机模型屏幕区域到背景图边缘的距离,从
px
值转换为百分比值(比例通过像素值除以图片像素宽度得到)
(可选)
max-width: 559px;
使外层div不至于超出背景图大小(背景图尺寸为
753 x 559
),
min-height
使内容较少的时候也能看到整个手机模型。
配色挺漂亮,嚯嚯嚯。
这个黑色线框可以直接写成“手机的”子元素。放在内部用百分比的宽高来控制一下大小,就能自适应了。
如:
.phone div {
width: 80%;
height: 80%;
margin: 0 auto;
margin-top: 10%;
}
-
div元素(css)定位
2018-10-18 14:56:261.定位:相对定位(position:relative) <html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:... -
vue里实现鼠标点击哪里div定位在哪里
2019-06-29 12:50:12定义个定位的div,需要绑定style <div v-if='showBox'> <div class='show-parent' :style="{left: tranLeft, top: tranTop}"> <div class="shard"> <div class="show-inner"> ... -
div元素定位的五种方法及其区别
2020-11-21 15:34:52方法一:默认定位,也就是静态定位,不需要设置定位属性 方法二:固定定位,相对于视口区进行定位。 position:fiexd 区别: 固定在视口区的某一位置, 原先位置不保留,会被后面的元素占有, 如果没有设置定位属性... -
包含时如何给div定位
2009-06-24 10:25:00用div的绝对定位: 不过要注意:这里的left和top是相对于table这个表格的左边距和顶边距而言的,因此如果table中有多行tr里面都包含了div,那么就要精确计算table的每一行的高度了,例如: height:28px;... -
div 父子定位,父div relative 子div absolute
2018-08-28 15:41:27<div class="fu"> <div class="a"> 1111111111111111111111111111111111111111 </div... -
一个DIV相对于另一个DIV定位
2017-10-17 15:01:00<div style="position:relative"><div style="position:absolute; top:0px;...top和left调整DIV位置,若DIV大小会动态改变可用 % 进行调整定位。 转载于:https://www.cnblogs.com/jeremy58... -
CSS设置DIV的绝对定位和相对定位
2019-08-11 13:45:19首先不给div设置定位,看看他们在网页中的位置 代码如下 <!DOCTYPE html> <html> <head>...CSS中div定位</title> <style type="text/css"> .div1{ heig... -
div弹出层 定位问题的 处理
2010-12-01 00:42:45div弹出层 定位问题的 处理 -
div盒子的相对定位(position:relative)和绝对定位(position:absolute)
2020-08-25 16:01:35有一说一,在做搜索框,鼠标触发事件的时候要用到盒子的相对和绝对定位。 在CSS中,position:absolute;当position的值为absolute时,这个盒子就是开启了绝对定位模式。...div id="main"> <d... -
html中div定位练习
2015-12-16 19:38:04html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float、position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定,$http请求等等,记录备忘: login.css中代码: /* 主... -
关于DIV相对于父DIV绝对定位
2017-11-24 19:12:32点击打开链接 还有发现个问题div 需要设为内联元素才有效果,即 display: inline-block; -
Div滚动条定位设置
2018-08-17 14:58:401.div <div id="DataDiv" style="overflow-x: hidden;overflow-y: scroll;max-height:500px;"> //数据 </div> 2.通过JS去设置Div滚动条的位置 document.... -
div 绝对定位覆盖
2017-03-08 17:54:41两个绝对定位的 div, 其中一个覆盖另一个 代码: -
div布局:相对定位、绝对定位、固定定位
2016-07-07 21:02:28当用div布局,相对定位时,子div的位置是相对于母div来设置的(从母div左上角开始算),margin可以活动到母div外围而不会把母div撑大,padding则总是在母div内部折腾,会把母div撑大。——————————————... -
div在相对父元素实现绝对定位
2020-06-11 17:35:46在学习前台做练手项目是遇到:div 使用 position:absolute;和left:0px不能实现相对父元素实现绝对定位。在百度时灵光一闪,使用margin-left实现需求。 2.css中的position属性 平时用的的属性值有以下几个: ... -
Selenium之如何定位隐藏div弹窗
2018-12-11 16:41:45一、判断是否为隐藏属性 display的值为none则为隐藏...js = 'document.querySelectorAll("#agentId > div > div > i")[0].style.display="block";' driver.execute_script(js) 部分知识参考自虫师及菜鸟教程 -
CSS页面定位多个div不重合
2020-07-06 15:58:49效果图: 之前是想高度写死,但是屏幕不适应 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素... //定位在左上部分,高度占40% .pie-div{ height: 40%; left:10px; top -
selenium中,div弹出提示框,如何定位?
2020-05-20 11:15:44弹出框是用div模拟出来的,用switch_to_window和switch_to_frame是切换不过去的,那么如何去定位到弹框呢? 可以这样处理: 一般弹出窗口那个mainFrame是同一层窗口,同时mianframe在顶层窗口下面,所以这里我通... -
selenium如何定位div、onclick、以及span、以及出现验证码如何处理
2022-03-25 20:33:251、有些div中什么属性都没有,只有个文本内容 如图我们要定位账号或密码错误文本内容,就得使用xpath方法定位,这里使用了xpath的模糊语句 driver.find_element('xpath',"//div[contains(text(),'错误')]").text ... -
selenium如何定位属性一样的div、span元素
2018-05-14 15:51:10在做自动化测试时,我们需要定位元素属性来进行操作,今天在做自动化时发现我要定位的元素找不到,我看了下代码发现,要定位的元素(A)属性与另一个元素(B)属性一样,我用xpath获取绝对路径后,发现找不到,找的... -
设置了绝对定位div里的文字不显示
2019-12-06 16:09:45我试过给文字加颜色也看不见,父级也有相对定位,设置了偏移量让span偏移出来还是看不见文字,也设置了优先级,不知道是什么原因呢? ps:是实现鼠标经过显示div1的效果 找不到span所以加了个背景色 但还是不见... -
div定位
2012-01-09 22:05:40static是系统默认的div定位方式,relative是在默认定位方式的情况下,进行的偏移,并且默认位置的空间将被占据,如上图所示,该空间无法被其它div占用,通常和top,bottom,left,right等参数配合使用. absolute是将div... -
绝对定位的元素居右的简单方法 div元素居右 / absolute定位
2020-09-09 09:44:15在不用flex、grid等布局的前提下,有些时候我们希望将一个元素不占位定位到某一个地方,比如说居右,由于要求元素不占位,所以float: right也不能完成需求。 解决方法 有一个简易的解决办法,下面是样式sample: .... -
三层DIV定位
2014-09-12 15:42:45CSS的position有三种属性:static, relative, absolute,如果DIV套DIV,达到多层,这些层间的定位关系又是怎样的呢? 1、只要父容器的postion属性不为static,组件就会以父容器作为定位基准,否则找上一级可定位的... -
selenium定位div弹出层时间插件
2017-04-20 01:20:05对xpath获得的绝对路径不能定位 要获取图中时间插件中的“取消”按钮就成  调用时间插件的位置 ![图片说明]...