为什么视频会逃脱设置在其包装上的垂直约束，即使overflow是hidden？我认为它与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>
固定元素不会将自己定位在距离最近的亲属之间。而是相对于视口固定自身位置。
这意味着您的固定元素将始终忽略父元素。
相反，使父级固定，子级相对于它。