Question

我不熟悉在CSS中使用相对位置。我正在努力与下面的HTML。我在IE8中运行它。我遇到的问题是让我的光标专注于我必须将其放在顶部边框上的文本框。

更新：通过将z-index添加到右侧div，上面的注释有所解决。我最初没有包含在我的问题中的是，左div中的内容被指定为jQuery draggable，输入文本框是droppable。我希望用户能够拖动值或自己输入值。当z-index添加到rightDiv时，允许用户手动输入条目的文本框上的焦点效果很好，但是当leftDiv中的条目被拖到文本框时，它会隐藏在文本框后面直到下降完成。

有什么建议吗？谢谢你的帮助。

<html>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<head>
<style>
.rightDiv {
  position : fixed;
  top:90px;
  left:198px;
}
.leftDiv {
  position : relative;
  right : -10px;
  top:10px;
}
</style>
</head>
<body>
<form>
<DIV class=rightDiv>
<INPUT size=10></INPUT>
</DIV>
<DIV class=leftDiv>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
1234<br>
</DIV>
</form>
</body>
</html>

Answer 1

我不明白你的问题.....但我认为你想要你的文本框顶部

尝试 - .rightDiv { 顶部：90像素; 左：198px; }

Answer 2

实际上左边的div包含重叠右边的div，所以它没有获得焦点尝试只有2或4“1234
”它会工作正常。这个问题是由于div的相对定位尝试了一些其他的方式，它会正常工作。

Answer 3

我不确定你想要达到什么目标，但如果你想让光标专注于文本框，你可以将.rightDiv放在{{1}上1}}使用.leftDiv：

z-index

检查：http://jsfiddle.net/XSBqc/1/

阅读侧栏上的所有相关问题

JQuery css与droppable输入文本框的相对位置

3 个答案: