html - 绝对定位的 div 是否有可能突破它的容器

Question

我看到过类似的问题，但不同的是我可以提供一个测试用例，但我没有找到解决方案。

我正在使用仅 ccs 的视差实现。问题是当屏幕为 768px 或更大时，我需要一个可以固定到窗口底部的页脚表格。不过，我找不到将它从其父框中分离出来的方法(使用定位固定或绝对定位)。

有什么建议吗？请只使用 Javascript 最后的手段。如果需要任何更多信息，请告诉我。

实例http://www.perthminiexcavatorhire.com.au/

HTML

<!--MAIN -->
<!--===============================================================-->
 <main class="main">

   <section class="slides row"><!-- absolute-->    
     <div class="slide" id="slide-1"><!-- relative-->    
      <div class="slide__bg"></div><!-- absolute--> 

         <div class="slide__text row">

             <div class="well panel_well one_edge_shadow row" >
                <?php include 'includes/content/panel1.php'; ?>
             </div>     

        </div>
    </div>

    <div class="slide" id="slide-2"> <!-- absolute-->   
    <div class="slide__bg one_edge_shadow"></div><!-- relative-->   
    <div class="slide__content row"><!-- absolute-->    

    <div class="slide__testomonial">

        <section class="row">       
                <?php include 'includes/content/embedded-video.php'; ?>    
        </section>

    </div> 
    </div>  
    </div>
<!-- Panel3 ==========================================-->

    <div class="slide" id="slide-3"><!-- absolute-->    
        <div class="slide__bg"></div><!-- relative-->   
        <div class="slide__content row"><!-- absolute-->    

        <div class="slide__text">

            <div class="well panel_well one_edge_shadow row">
                <?php include 'includes/content/panel2.php'; ?>
            </div>  

        </div>
        </div>
    </div>     

<!-- FORM==========================================-->
<div class="slide " id="slide-4"><!-- absolute-->   
    <div class="slide__bg"></div><!-- relative-->   
        <div class="slide__content row"><!-- absolute-->    

        <section class="footer slide__footer"> 
            <?php include 'includes/content/form.php'; ?>    
        </section>

    </div>
</div>
</section>      
</main>

CSS

/*FORM*/
   form{position: fixed; bottom: 0;left: 0; width: 100%;background-color: black;display: block;}

/* PARALLAX STYLES
--------------------------------------------- */
.slides{overflow: hidden}

.slide {
    position: relative;/*to background*/    
}

/* slide background */
.slide__bg {
  position: absolute;/*in relation to slide container*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;/*bottom layer*/;
}
#slide-1 .slide__bg {
    background-color: darkcyan;
}
/*non critical styling*/
#slide-2 .slide__bg {
    background-color: darkmagenta;
}
/*non critical styling*/
#slide-3 .slide__bg {
  background-color: darkgoldenrod
}
/*non critical styling*/
#slide-4 .slide__bg {
    background-color: darkblue;
}

.slides {
    position: absolute;/*position container in window*/
    width: 100%;/*fill container*/
    height: 100%;/*fill container*/
    perspective: 400px;/*dictates size of slide--bg*/
    overflow-x: hidden;/*hide scroll bar*/
    overflow-y: auto;/*hide scroll bar*/
    }

.slides::-webkit-scrollbar { 
    display: none;/*hide scroll bar*/ 
}

/* Only apply to larger screens
--------------------------------------------- */ 
@media screen and (min-width: 768px) {

  /* parallax */
  @supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
    body {
      transform: translateZ(0px); /* Fix paint issues in Edge && Safari H/W acceleration */
    }


.slide, .slide__content {
      transform-style: preserve-3d;/* maintain perspective effect*/ 
    }

  .slide__text {
      transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
      transform-origin: 50% 50%;/*position of text on slide*/
        /*background-color: aqua;   */
      background-color: red;
      height: 800px;
    }


.slide__testomonial {
      transform: translateZ(80px) scale(.7);/*set text distance from page and scale*/
      transform-origin: 50% 50%;/*position of text on slide*/
        background-color: aqua;
    height: 800px;
    }

.slide__footer {
    transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
    transform-origin: 50% 50%;/*position of text on slide*/
    background-color: green;
    height: 400px;
    }



    .slide:nth-child(2n) {
      z-index: 1; /* ensure EVERY OTHER SLIDE overlays correctly */
    }

    .slide:nth-child(2n+1):not(:first-child) .slide__bg {
      top: -16%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING FIRST - extend slide__bg to meet next bg to fill gap*/
         bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING
    }

    .slide:nth-child(2n) .slide__bg {
      transform: translateZ(59px) scale(.85);/*SELECTS EVERY EVEN SLIDE AFTER THE FIRST - set background distance from page and scale to match window*/
    }

    .slide:nth-child(2n+1):not(:last-child) .slide__bg {
      bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING LAST extend slide__bg to meet next bg to fill gap*/
    }


    }

Answer 1

可能你的容器有

position: relative

以 JS 为例，将其添加到您的 html 元素下。

<script type="text/javascript">
window.onload = function() {
var elem = document.getElementById("yourElement");
document.body.appendChild(elem);
};
</script>