如何使用css / jquery制作響應式絕對定位元素

Question

我有一個div標簽，其背景圖像在頁面加載時具有css動畫：div標簽的中心將打開兩個邊框，然后當邊框動畫結束時一秒鍾后背景圖像出現。 這兩個邊界的位置是絕對的。 我遇到一個問題，當我按比例縮小瀏覽器時，背景圖像按比例縮小（這是我想要的），但是兩個邊框保持在同一位置。 我希望兩個邊框在瀏覽器放大或縮小時改變位置，以便背景圖像div停留在它們之間。 無論如何用css或jquery做到這一點？ 這是我所擁有的粗略想法：

 .background-img { width: 10px; margin: 0 auto; opacity: 0; animation-name: fading-in; animation-delay: 2s; animation-duration: 1s; animation-fill-mode: forwards; } .borders { position: absolute; left: 50%; width: 8px; background-color: blue; height: 50px; border-radius: 4px; } .left-vertical-border { animation-name:move-left; animation-duration: 2s; animation-timing-function: ease-in; animation-fill-mode: forwards; } .right-vertical-border { top: 8px; animation-name:move-right; animation-duration: 2s; animation-timing-function: ease-in; animation-fill-mode: forwards; } @keyframes move-left { from{transform: translateX(0px);} to{transform: translateX(-100px);} } @keyframes move-right { from{transform: translateX(0px);} to{transform: translateX(100px);} } @keyframes fading-in { from{opacity:0;} to{opacity:1;} }

 <!DOCTYPE html> <html> <head> <title>Responsive Absolute Positioning using css/jquery</title> </head> <body> <div class="left-vertical-border borders"></div> <div class="background-img">fake bg image</div> <div class="right-vertical-border borders"></div> </body> </html>

Answer 1

使用絕對位置。 父div必須具有相對的財產位置。 在您的CSS中，我沒有看到相對位置。 在這種情況下，可能會出現問題

如何使用css / jquery制作響應式絕對定位元素

問題描述

1 個解決方案

解決方案1
0 2016-05-20 06:57:47

如何使用css / jquery制作響應式絕對定位元素

問題描述

1 個解決方案

解決方案1 0 2016-05-20 06:57:47

解決方案1
0 2016-05-20 06:57:47