javascript - "Dock"onClick() 事件中一个 div 元素在另一个之上

Question

那我该怎么做呢？我需要在另一个 Div 之上设置/停靠一个 div 元素(包含一些其他 div 和表单对象)。停靠 div 用作某种输入框对话框，它应该出现在您单击的元素的正上方，在我的例子中，我设置了 onClick()事件发生在...

Click <span onClick="showInputbox()">here</span> to set value元素。

不确定仅使用 CSS 是否可以实现，但我将不胜感激任何帮助。非常感谢!

编辑:我实际上遇到了定位的问题:将一个元素(我应该说)放在上方另一个(标签或跨文本元素)，而不是关于显示-隐藏元素的内容太多了。

关于脚本:

function showInputbox(){
var txt = document.getElementById("txtHere").style;
var dlgInput = document.getElementById("dlgInput").style;

dlgInput.top = txt.top + dlgInput.height;
dlgInput.left = txt.left;
dlgInput.visibility = "visible";
}

这行不通，我的意思是，.top和 .left总是显示 null ，我做错了什么？

Answer 1

由于您想要将两个同级 div 一个放在另一个之上，您可以利用它们具有相同父级这一事实并使用 CSS 进行定位。

第一个例子可以看here . 这是做什么的:

• HTML 是一个简单的结构，如您所说，有 2 个 div 和一个共同的父级。
• 在 CSS 中，我为 divs 和背景指定了宽度和高度。此外，我将第一个应该在开头隐藏的 div 的 display 设置为 none。
• 我还将隐藏的 div 设置为 position:absolute。这允许我使用诸如 bottom、left、right、top 之类的东西。

• 你可以看到我在父元素中添加了position:relative。我这样做是因为 position:absolute 将相对于第一个 position 为 relative 或 absolute 的父元素定位>.

• 我使用 jQuery 库添加 onClick() 事件，该事件将添加 display:block 到隐藏的 div单击第二个 div。

• 确保 当 DOM 完全加载时添加 onClick() 事件(DomReady，在发布的 jsFiddle 中被选中，使用 jQuery 您有 就绪事件)。

注意:jQuery 部分也可以仅使用 javascript 来完成，但我建议使用它，因为它可以节省大量工作时间，而且它很常见。

更新:

http://jsfiddle.net/GLf4X/5/

HTML:

<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
    <div id="child3">
    </div>
</div>

CSS:

#child1{
    width:300px;
    height:50px;
    background:#333;
    display:none;
    position:absolute;
    bottom:100%;
}

#child2{
    width:300px;
    height:50px;
    background:#666;
    margin-bottom:100px;
}

#child3{
    width:300px;
    height:50px;
    background:#999;
}

#parent{
    margin:60px auto;
    position:relative;
}

Javascript:

function getOffset( el ) {
    var offset = { top: 0, left:0 };
    if( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        offset.left = el.offsetLeft - el.scrollLeft;
        offset.top = el.offsetTop - el.scrollTop;
    }
    return offset;
}

function displayAboveElement(event){
    event.stopPropagation();
    var divToShow = document.getElementById('child1'),
        clickTarget = event.target;
        offset = getOffset(clickTarget);
    divToShow.style.display = 'block';
    console.log(clickTarget.style);
    divToShow.style.top = (offset.top - clickTarget.clientHeight) + 'px';
    divToShow.style.left = offset.left + 'px';
}

document.getElementById('child2').onclick = displayAboveElement;

document.getElementById('child3').onclick = displayAboveElement;

你的问题是什么:

• 您正在尝试从未设置的元素中读取 left 和 top。这就是它们为空的原因。
• left 和 top 仅对 position:absolute 元素有效。
• 据我所知，元素的 style 返回内联样式属性，我认为您不希望这样。

如您所见，在没有库的情况下编写 javascript 时需要考虑很多事情(此外，您必须支持 4-5 种浏览器，并且在一种浏览器中运行的代码可能无法在另一种浏览器中运行)。这就是我推荐使用像 jQuery 这样的库的原因。

我做了什么:

• 计算被点击元素相对于其直接父元素的顶部和左侧偏移量。
• 将这些值作为内联样式添加到必须显示的 div。