Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 section titled "new part" was created to highlight the issue. After some investigation, I discovered that the CSS property causing the problem is position: absolute.
<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;
}
Removing the position: absolute property will make the content display correctly, but it will mess up the video's positioning, leading to overlap issues in desktop view and functionality problems in mobile view. Is there another way to achieve the same result without using position: absolute?