Question

在this jsfiddle中，我想要使红色框始终与灰色“页脚”框的右边缘保持对齐，而不管“页脚”框的宽度如何变化。也就是说，红色框最初位于正确的位置，但是当您单击“延长页脚”按钮时，“页脚”框会变长，红色框不会随之移动（因为我将它作为绝对位置）现在）。

如何将红色框固定在灰色“页脚”框的右边缘？

jsfiddle的代码：

HTML：

<div class="footerContainer">
    footer
    <div class="aboveFooter"></div>
</div>
<button id="btnClick">
    Extend footer
</button>

CSS：

.footerContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 0;
    bottom: 0;
}

.aboveFooter {
    position: absolute;
    bottom: 82px;
    left: 52px;
    height: 50px;
    width: 50px;
    background-color:red;
}

JS：

$('#btnClick').on('click',function(){
    $('.footerContainer').html($('.footerContainer').html() + ' longer');
});

Answer 1

您正在使用left: 52px，它将红色框52px从左侧相对于定位的父级（.footerContainer）定位。要使其在右边缘保持齐平，请使用right: 0;

＆＃13;

$('#btnClick').on('click',function(){
    $('.footerContainer').html($('.footerContainer').html() + ' longer');
});

＆＃13;

.footerContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 0;
    bottom: 0;
}

.aboveFooter {
    position: absolute;
    bottom: 82px;
    right: 0;
    height: 50px;
    width: 50px;
    background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footerContainer">
    footer
    <div class="aboveFooter"></div>
</div>
<button id="btnClick">
  Extend footer
</button>

＆＃13;

CSS - 修复div作为固定div的子代

1 个答案: