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

Question

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

小提琴：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

固定位置元素相对于浏览器窗口定位。

Answer 2

正如其他人所说，position:fixed与视口相关，因此您无法仅使用 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(); });

Answer 3

你不清楚你希望这个布局如何表现，但我敢打赌有 CSS 方法来修复它。如果您希望它留在右下角：

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

您还可以使用边距来进一步定位您的元素。例如，如果您希望它居中：

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

Answer 4