Question

我正在尝试将<div>始终放在页面上的任何其他位置。使用javascript插入<div>，它始终是</body>之前页面上的最后一个元素。

到目前为止，我已经尝试了clear:both和position:relative，但是如果内容（上面的元素）位于绝对位置，那么它会很好用，但这会是example。

所以我要找的是一些css / js魔法，总是将<div>置于其他任何位置。

我不知道在注入的<div>之上有多少元素，我不知道它们是如何定位的。

不幸的是position:fixed不是一种选择。

我的解决方案

我最终在javascript的帮助下完成了这项工作：

将绝对定位的<div>元素插入页面后，我使用以下函数计算页面高度：

function getBodyHeight() {
  var body = document.body, html = document.documentElement;
  return Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

并根据身高设置最高位置：

element.style.top = (getBodyHeight())+"px";

Answer 1

以下脚本可以解决这个问题：

$(document).ready(function() {
    var height = $('#content').height();
    $('#mydiv').css({top: height});
});

JSFiddle

请注意，为了实现这一目标，您需要为position:relative

应用#mydiv

Answer 2

也许你可以试试这个：http://jsfiddle.net/Hn3Nx/2/

CSS：为body设置相对位置，为#mydiv

设置绝对值

#mydiv {    
    position: fixed;
    height: 150px;
    background-color: red;
    width: 100%;
    bottom: 0;
}

body {
    position: relative;
}

Answer 3

查看insertAfter()和inserBefore()函数，除了您身边的逻辑外，它们是您所需要的。

如果您仍然觉得难以思考，那么使用jQuery detach()分离div并插入您想要的任何内容，然后使用<body>再次将div附加到append()。如果你想在javascript中执行它，那么你的任务就是找出这些函数的等价物。我使用jQuery来完成这些任务。

Answer 4

请删除职位：绝对;来自#content，这是一个选项。

#content {
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    border: 0;    
    overflow: visible;
}
    
#mydiv {    
    clear: both;
    position: relative;
    height: 150px;
    background-color: red;
    width: 100%;
}

<div id="content">sadas asdasd asdsa dsad sa</div>
<div id="mydiv">sadasdsa</div>

将元素始终位于页面底部，位于其他元素下方

4 个答案: