Question

<div class="mainDiv">

    <span class="foregroundImage" id="foregroundImage1"></span>

    <!-- Layer Code -->

    <div class="layerDiv">

    </div>

    <!-- Layer Code -->

</div>

我需要将layerDiv定位为

它应位于mainDiv的中心（不在屏幕中心）
mainDiv的高度和宽度是自动的，所以即使我向下滚动它也应该在中心的可见部分。

Answer 1

为图层div赋予宽度，然后为margin：10px auto。您可以选择上/下边距以保证您的舒适度。它可以是任何固定值。不能自动。并且layerDiv必须有宽度。

Answer 2

您需要创建一个方法来查找主div的高度和宽度以及layerDiv的高度和宽度。

layerDiv的顶部位置= mainDiv高度的一半 - 一半 layerDiv height
layerDiv的左侧位置= mainDiv宽度的一半 - 一半 of layerDiv width

准备好此方法后，可以通过JQuery在文档加载和滚动事件上调用此方法。

Answer 3

对于框中的死点框，请尝试

$('.layerDiv')
    .css('position','relative')
    .width('90%')
    .height('90%')
    .css('left', 
        (
          0.5 * $('.mainDiv').width() 
        - 0.5 * $('.layerDiv').width()
        )
    )
    .css('top', 
        (
          0.5 * $('.mainDiv').height() 
        - 0.5 * $('.layerDiv').height()
        )
    );

相应地调整宽度和高度％或指定px值

对于一个永久位于屏幕中心的居中框作为滚动，请使用：

$('.layerDiv')
    .css('position','fixed')
    .width(.9*$('.mainDiv').width())
    .height(.25*$(window).height())
    .css('left',
        (
            0.5 * $('.mainDiv').width()
            - (
                0.5 * $('.layerDiv').width()
                - $('.mainDiv').offset().left
            )
        )
    )
    .css('top',
        (
            0.5 * $(window).height()
            - (
                0.5 * $('.layerDiv').height()
                - $('.mainDiv').offset().top
            )
        )
    );

这将是maindiv宽度的90％的内盒，屏幕高度的25％，在div中均匀居中，并且在滚动时始终位于屏幕中间

div的位置和另一个div一样，即使滚动也是如此

3 个答案: