即使 overflow 被隐藏，为什么视频还是逃脱了在其包装器上设置的垂直约束？我假设它与 position: fixed 有关，但这是我的应用程序所必需的。我该如何解决这个问题？
<html>
<head>
<style>
#video-wrapper {
width: 100%;
height: 500px;
overflow: hidden;
}
#video {
position: fixed;
}
</style>
</head>
<body style="height: 100%;">
<div id="video-wrapper">
<video autoplay muted loop preload id="video">
<source src="path_tp_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut consequat semper viverra nam libero. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Habitant morbi tristique senectus et netus. Ut tellus elementum sagittis vitae. Elit pellentesque habitant morbi tristique senectus et netus et. Fermentum iaculis eu non diam phasellus vestibulum lorem. Egestas congue quisque egestas diam in. Integer feugiat scelerisque varius morbi enim. Nunc consequat interdum varius sit. Nulla porttitor massa id neque.
Arcu odio ut sem nulla pharetra diam. Aliquet nec ullamcorper sit amet. Vulputate eu scelerisque felis imperdiet proin fermentum. Et molestie ac feugiat sed lectus vestibulum mattis. Id faucibus nisl tincidunt eget nullam non nisi est sit. Pellentesque nec nam aliquam sem et tortor consequat id porta. Non arcu risus quis varius. Adipiscing at in tellus integer feugiat scelerisque. Tellus at urna condimentum mattis. Faucibus interdum posuere lorem ipsum dolor sit. Sed risus pretium quam vulputate dignissim suspendisse in est. Id faucibus nisl tincidunt eget nullam.
Tellus orci ac auctor augue. Dictum at tempor commodo ullamcorper a lacus. Gravida arcu ac tortor dignissim convallis aenean et tortor. Mattis aliquam faucibus purus in massa tempor nec. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Praesent tristique magna sit amet. Mattis pellentesque id nibh tortor id. Praesent tristique magna sit amet purus gravida quis blandit turpis. Eget lorem dolor sed viverra ipsum. Pellentesque adipiscing commodo elit at imperdiet. Donec ac odio tempor orci dapibus. Nibh sit amet commodo nulla facilisi nullam vehicula.
Faucibus nisl tincidunt eget nullam non nisi est. Ultrices dui sapien eget mi proin sed libero enim. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Quis hendrerit dolor magna eget. Nisl vel pretium lectus quam id leo. Turpis egestas sed tempus urna et. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Elit sed vulputate mi sit amet. Pulvinar mattis nunc sed blandit libero volutpat sed cras. Felis imperdiet proin fermentum leo vel orci porta. Fringilla ut morbi tincidunt augue interdum velit euismod. Vitae auctor eu augue ut lectus arcu bibendum at varius.
Nisl nisi scelerisque eu ultrices vitae auctor. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Rhoncus dolor purus non enim praesent. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Purus semper eget duis at tellus at urna condimentum mattis. In ornare quam viverra orci sagittis eu volutpat odio. In est ante in nibh. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Eget velit aliquet sagittis id consectetur purus ut. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Tortor dignissim convallis aenean et tortor.
</body>
</html>
最佳答案
固定元素不会将自己定位在与其最近的相对父元素之间。相反，固定位置本身相对于视口(viewport)。
这意味着您的固定元素将始终忽略父元素。
相反，让父项固定，子项相对于它。
关于html - 视频通过溢出 : hidden 逃脱它的包装，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55264582/