可以用position属性来进行定位
<html>
<head>
<style type="text/css">
2{position:absolute;top:20px;left:30px;}
#contain{position:relative;}
</style>
<body>
<div id="contain">
<div class="1"></div>
<div class="2"></div>
</div>
</body>
</head>
</html>
首先要让DIV启用编辑模式
<div contenteditable=true id="divTest"></div>
通过设定contenteditable=true开启div的编辑模式这样DIV就可以跟文本框一样输入内容了。
2个步骤
1：获取DIV中的光标位置
2：改变光标位置
var cursor = 0; // 光标位置
documentonselectionchange = function () {
var range = documentselectioncreateRange();
var srcele = rangeparentElement();//获取到当前元素
var copy = documentbodycreateTextRange();
copymoveToElementText(srcele);
for (cursor = 0; copycompareEndPoints("StartToStart", range) < 0; cursor++) {
copymoveStart("character", 1);//改变光标位置，实际上我们是在记录cursor的数量
}
}
给document绑定光标变化事件。用来记录光标位置
这样就可以拿到DIV的光标位置了
如何设置DIV层的相对位置，解决办法：
利用js代码首先创建一个div，documentcreateElement('div')
确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
确定位置之后，显示div即可。
DIV层的相对位置是对于此DIV的上下左右的容器决定的。
如：<div style="position: relative;margin-top:-100px">则此DIV会相对于上一个DIV向上移100PX。
而绝对是指对整个页面来说。
如<div style="position: absolute;margin-top:100px;">则此DIV会相对于整个页面向下移。
做一下修改：
#left{ float:left; width:30%; height:100%; background:#eeeeee;
margin-left:12px;
}
margin-left:12px;设置“left”左边界离左的距离,设置这个是为了让你左边的div不紧贴左边
#right{ float:right; width:68%; height:100%; background: #eeeecc}
你使用的是二列自适应宽度布局,改你的width为68%是因为你原来的70%是你上层div的总大小的70%，left设置了边界（边界+填充+内容+边框=div总宽）所以left标签的总width已经大于30%，故还要改下right的width
不懂继续问，你这种二列布局有4种方法可以讲给你
以上就是关于html div定位全部的内容，包括:html div定位、如何获取可编辑div或body里光标的像素位置、如何设置DIV层的相对位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）