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

可能你的容器有

    public function removetax($observer)
    {
        $customer_id = Mage::getSingleton('customer/session')->getId();
        $customer = Mage::getModel("customer/customer")->load($customer_id);

        if($customer->getIsTaxExempt() == 1)
        {
            $items = $observer->getEvent()->getQuote()->getAllVisibleItems();
            foreach($items as $item)
                $item->getProduct()->setTaxClassId(0);
        }
    }

使用JS的示例，在你的html元素下添加它。

position: relative

绝对定位的div是否有可能打破它的容器

1 个答案: