Question

我想要以某种方式定位3张图像，它与窗口大小无关。我使用position: relative声明。但是如果我定义前两个图像的位置并插入第三个图像，它会破坏前两个图像的位置。

是否有“换行”功能或类似的东西？

样式

  #section0 .home{
        opacity: 0;

    }
    #section0 .fecha{
        left: 130%;

        position: relative;

    }

    #section0 .pray{
        left: 50%;
        bottom: 80%;
        position: relative;
    }

功能

$(document).ready(function() {
            var pepe = $.fn.fullpage({

                slidesNavigation: true, 
                slidesNavPosition: 'top',
                slidesColor: ['#000000', '#000000', '#000000', '#000000', '#000000', '#000000'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', '5thPage', 'lastPage'],
                menu: '#menu',
                css3: true, 

                //animation on first page
                afterRender: function(){
                        $('#section0').find('.fecha').delay(100).animate({left: '-60%', bottom: '-3%'}, 3000, 'easeOutExpo');
                        $('#section0').find('.pray').delay(100).animate({left: '0%', bottom: '28%'}, 3000, 'easeOutExpo');
                        $('#section0').find('.home').fadeTo( "slow" , 1, function() {});

                },

HTML

<div class="pray">
    <img src="CIMA/Home_pray.png" alt="Cool" style="z-index: '0', overflow: 'hidden', left: '4%', bottom: '32%'"  height="40%" width="40%"  />
</div>

Answer 1

它独立于窗口大小。

听起来你想要从正常流程中取出元素。

应用position:absolute或position:fixed，这将使图像脱离正常流程并且它们将独立行动（它们将不再相互推动并且可以与其他元素重叠）。您可以使用top right bottom left属性来定位它们。

详细了解CSS Position @ MDN

（是的，欢迎投票，我预感这是OP想要的，这只是他可能正在处理的最简单的情况。）

图像影响其他图像 - 包装功能？

样式

功能

HTML

1 个答案: