html - 为什么我的元素上的 position static 没有相对于父 div 定位？

Question

我有一个包含 position: relative 的容器 div分配给它，在这个 div 中我有一个 anchor 标记，它有 position: fixed分配给它。而不是 <a>相对于其父 div 定位，它将自身定位到 body。谁能解释一下我该如何解决这个问题？

fiddle : http://jsfiddle.net/DWMTn/

CSS

*{padding:0;margin:0;}

.main {
    width: 300px;
    position: relative;
    background: #eee;
}

p {
    margin-bottom: 20px;
}

.btn {
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    color: white;
    text-align: center;
    line-height: 100px;
    position: fixed;
    right: 0;
    bottom: 0;
}

Answer 1

正如其他人所说，position:fixed 是相对于视口(viewport)的，因此您无法单独使用 css 实现您想要的效果。如果您想将 btn 固定到 main 容器，那么您还需要使用一点点 javascript 的绝对定位。

在这个例子中，我使用了 jQuery 库来移动按钮:

http://jsfiddle.net/DWMTn/7/

var main = $('.main:eq(0)'); //would be better to use an id here
var button = $('.btn:eq(0)'); //would be better to use an id here
var max = main.height() - button.height();

button.css('bottom', 'auto'); //removes the original bottom positioning

function moveButton() {
    var top = $(window).scrollTop() + $(window).height() - button.height();
    if (top > max) {
        top = max;
    }

    button.css('top', top + 'px');
}

moveButton();

$(window).scroll(function() { moveButton(); });
$(window).resize(function() { moveButton(); });