如何使用slideDown（）將絕對定位的DIV推送內容放置在其下方？

-1

我有一個頁面，可容納舊式960x包裝紙中的所有正文內容。我需要在頁面中間添加橫幅，但是此橫幅需要跨越整個頁面的寬度。不僅如此，它還有一個使用slideUp()和slideDown()的顯示/隱藏手風琴。所以當它滑動時，它需要將它下面的內容推下。如何使用slideDown（）將絕對定位的DIV推送內容放置在其下方？

全在這裏例如：http://jsfiddle.net/dvawzg8g/1/

我能想到得到一個封裝的子元素是網頁，其中包裝有一組像素寬度的整個寬度的唯一方法，就是用絕對定位。當我這樣做時，它會以高於或低於其他頁面內容的方式結束，並且不會以slideUp()和slideDown()推送它。

來源

2014-10-09 user1729506

位置是絕對，添加一個「填充物」，在它的位置，相同高度的DIV，當你切換手風琴切換填充div的高度，以及 – 2014-10-09 16:49:32

我很困惑。你的JSfiddle是否已經完成你所描述的內容？您想要的狀態的一些草圖可能會有所幫助。另外，我不確定我看到你的問題是什麼。 – 2014-10-09 16:52:06

@SurrealDreams他希望橫幅跨越100％的窗口，但它必須位於960像素的容器中。 – 2014-10-09 16:52:48

所以基本上這背後的概念是假的效果具有旗幟定位絕對有它背後的空div正確的，模擬它的位置：

的HTML

<div class="container"> 
    <div class="content"><p>potatopotatopotatopotatopotatopotatopotatopotato</p></div> 
    <div class="content">potatopotatopotatopotatopotatopotatopotatopotatopotatopotato</div> 
    <div class="banner">banner</div> 
    <div class="filler">filler</div> 
    <div class="content">potatopotatopotatopotatopotatopotato</div> 
    <div class="content">potatopotatopotatopotatopotato</div> 
</div>

The Css

.container{ 
    width:960px; 
    height:1000px; 
    margin:0 auto; 
} 
.content{ 
    height:200px; 
    border:1px solid #000; 
} 
.banner{ 
    position:absolute; 
    width:100%; 
    height:20px; 
    border:1px solid red; 
    left:0; 
    -webkit-transition:all 0.2s linear; 
} 
.filler{ 
    height:20px; 
    -webkit-transition:all 0.2s linear; 
} 
.toggled{ 
    height:100px; 
}

And 的JS：

$('.banner').on('click', function(){ 

    $('.filler, .banner').toggleClass('toggled'); 
});

Fiddle

來源

2014-10-09 17:02:19

我很容易就能夠適應我的代碼。簡單的概念，並在最後一頁上運行良好。謝謝。 – user1729506 2014-10-09 18:59:08

如何使用slideDown（）將絕對定位的DIV推送內容放置在其下方？

回答

相關問題