使絕對定位的div覆蓋視口
[英]Make absolute positioned div cover the viewport
問題描述
我正在制作一個jQuery動畫，它具有在視口的特定位置（ left: 150px ）生成的絕對位置的div，並且該div垂直和水平增長，覆蓋了整個視口
但不幸的是，div溢出了視口，並且沒有覆蓋整個屏幕
$(document).ready(function() { function generateChild(top, bottom, left, right) { $("#divGenerator").append(` <div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div> `); } generateChild("50vh", "0", "80vw", "0"); /* setInterval(function() { $(".child").animate({ "transform": "translate3d(0, 0, 0)", "transition": "all 0.5s ease-out" }, 3000, function() { $(this).fadeOut().remove(); }); }, 1000); */ })
body { margin: 0; overflow: hidden; } #divGenerator { position: relative; height: 100vh; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: black; border: 1px solid black; } .child { position: absolute; width: 20px; height: 20px; border: 1px solid white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trippy Waves</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <div id="divGenerator"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2018-10-21 17:16:40
為了達到這種效果，您需要滿足以下幾個條件：
- 使用
position:fixed（不是absolute），因此您的元素是相對於視口放置的，而不是相對於其最近放置的相對父對象。 - 從您開始的元素的
.getBoundingClientRect()獲取初始的top，left，width和height。 請注意，此方法是在DOM元素上定義的，而不是在jQuery包裝器上定義的（因此，您需要$(selector).get(0).getBoundingClientRect()） - 從這些位置朝着：
top:0;left:0;width:100vw;height:100vh。
在此特定示例中，不需要getBoundingClientRect() ，因為您是從任意數據（通過函數）生成元素的，但是通常您需要它，因為它獲取元素相對於視口當前位置的位置 （包括滾動等） ...）。
$(document).ready(function() { function generateChild(top, bottom, left, right) { $("#divGenerator").append(` <div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div> `); } generateChild("50vh", "0", "80vw", "0"); setInterval(function() { $(".child").animate({ "width": "100vw", "height": "100vh", "top":0, "left":0 }, 3000, function() { $(this).fadeOut().remove(); }); }, 1000); })
body { margin: 0; overflow: hidden; } #divGenerator { position: relative; height: 100vh; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: black; border: 1px solid black; } .child { position: fixed; width: 20px; height: 20px; border: 1px solid white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trippy Waves</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <div id="divGenerator"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js"></script> </body> </html>
個人建議：不要使用.animate() 。 使用速度 。
是否可以將包含絕對位置div的相對位置div居中？
[英]Is it possible to center a relative positioned div that contains an absolute positioned div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.