利用CSS的position属性对元素定位，以下是position 属性规定元素的定位类型。
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
首先要让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的光标位置了
做一下修改：
#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种方法可以讲给你
1、拖动后记录x,y值
给div加上mousePosition事件
function mousePosition(evt){
evt = evt || windowevent;
return {
x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,
y : evtclientY + documentbodyscrollTop - documentbodyclientTop
}
}
2、打开页面div定位
$(“div”)attr("top",y)attr("left",x);
扩展资料
在用js获取元素的位置之前，元素在页面的位置的计算公式，如下：
元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值；
用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 ｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝。
<html >
<head>
<meta >
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;
background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
documentgetElementById('demo')onclick=function (){
if (documentdocumentElementgetBoundingClientRect) {
alert("left:"+thisgetBoundingClientRect()left)
alert("top:"+thisgetBoundingClientRect()top)
alert("right:"+thisgetBoundingClientRect()right)
alert("bottom:"+thisgetBoundingClientRect()bottom)
var X= thisgetBoundingClientRect()left+documentdocumentElementscrollLeft;
var Y = thisgetBoundingClientRect()top+documentdocumentElementscrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
以上就是关于html中怎么设置div的位置全部的内容，包括:html中怎么设置div的位置、如何获取可编辑div或body里光标的像素位置、DIV内的DIV如何定位等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）