是否有可能讓一個絕對定位的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，在添加此HT ml元素。

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