I am new to HTML/CSS and wanted to implement a “sticky border” to my page but am unable to accomplish this.
body {
height: 100%;
margin: 0;
background-color: lightgray;
overflow: auto;
}
.pagewrap {
height: 100vh;
border: 15px solid gray;
position: sticky;
top: 0;
z-index: 2;
}
.content {
margin-top: calc(-100vh + 15px);
margin-right: 15px;
margin-left: 15px;
/* height: calc(100vh - 30px); */
z-index: 1;
position: relative;
}<div class="pagewrap"></div>
<div class="content">
<header>
<a href="/">
<img id="logo" src="img/Cropped_Image.png" alt="logo">
</a>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
</div>This is the closest I’ve gotten, however I am now unable to click on my nav links. I understand this is caused by the higher z-index of .pagewrap over .content. If I make the z-index of .pagewrap to be less than .content, the elements on the page now have priority over the border and phase over it.
1
You don’t need the extra div, use a pseudo-element and position:fixed
* {
margin: 0;
padding: 0;
min-width: 0;
min-height: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
:root {
--border-w: 15px
}
body {
height: 100%;
margin: 0;
background-color: lightgray;
overflow-y: auto;
}
body:before {
content: "";
height: 100vh;
width: 100%;
border: var(--border-w) solid gray;
position: fixed;
top: 0;
pointer-events: none;
}
.content {
padding: var(--border-w);
height: 1000px;
}
ul {
list-style: none;
}<div class="content">
<header>
<a href="/">
<img id="logo" src="img/Cropped_Image.png" alt="logo">
</a>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>3