My problem is that when I try to create a new section or any new content after the homepage, it doesn’t appear on a new page but still displays on the homepage itself. I have uploaded the project to codepen as an example, where I created an h1 section titled “new part” to illustrate my issue. I also figured out specifically what is causing this.In this section(what can you find in the right content part), the CSS includes the position: absolute property.
<div class="col-lg-4 p-0">
<div class="video">
<div class="video-container">
<div class="vid-overlay"></div>
<video autoplay muted loop playsinline>
<source src="hands.mp4" type="video/mp4">
</video>
</div>
</div>
.col-lg-4.p-0
{
height: 100vh;
right: 0;
top: 0;
pointer-events: none;
overflow: hidden;
position: absolute;
}
If I remove this, the content displays correctly, but the video’s position becomes incorrect. This causes overlapping issues in desktop view and also doesn’t work properly in mobile view, affecting several functionalities.Is there any alternative to achieve the same result as using position: absolute?