The Art of Cascading Style Sheets Scrolling Alignment

Hello seasoned developers, I'm diving into the world of web design. I have a question about the code below. The yellow container scrolls under the nav bar as expected, but the red container scrolls above it. Can anyone provide some guidance?

view image description here

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire|neon|3d|fire-animation|shadow-multiple|3d-float">
</head>

<body>
    <div class="h">
        <div class="nav">
            <img src="logo.png" alt="">
            <h1 class="title font-effect-shadow-multiple">CSS Page</h1>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        
    </div>
   <br>
   <div class="header1">
        
            <img src="black-g51b181fe3_1920.jpg" alt="">
            <div class="side"></div> 

          
      
    </div>

</div>
    
</body>


</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Sofia;
}

.h {
    position: relative;
}

.nav {
    width: 100%;
    position: fixed;
    display: flex;
    background-color: aquamarine;
    height: 100px;
    box-shadow: 10px 10px 20px #1e1b249f;
}

.nav ul {
    font-size: 29px;
    margin-left: 65%;
    margin-top: 16px;
    float: right;
    justify-content: space-between;
}

li {
    list-style: none;
    padding: 10px;
    display: inline-block;
}

.nav ul li a {
    text-decoration: none;
    color: black;
}

.nav ul li:hover {
    text-decoration: underline;
    text-decoration-color: chartreuse;
}

.title {
    font-size: 33px;
    position: absolute;
    top: 23px;
    left: 43%;
    color: black;
}

.header1 {
    margin-top: 400px;
    top: 50px;
    border: 10px solid yellow;
    position: static;
}

.header1 img {
    width: 100%;
    height: 800px;
}

.heading {
    bottom: 300px;
    left: 40px;
    color: antiquewhite;
    height: 200px;
    width: 300px;
}

.heading h1 {
    text-decoration: underline;
    text-decoration-color: aquamarine;
}

.side {
    position: absolute;
    top: 550px;
    right: 20px;
    border: 20px solid red;
    width: 350px;
    height: 350px;
}

.side img {
    background-size: cover;
}

When scrolling, both the yellow and red bordered containers should remain under the fixed nav bar. However, the red bordered container is scrolling above the nav bar. How can this be fixed?

Answer №1

To ensure proper layering, simply include z-index: 1; in the styling for .nav (you can adjust the value if needed based on other elements):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Sofia;
}

.h {
  position: relative;
}

.nav {
  width: 100%;
  position: fixed;
  display: flex;
  background-color: aquamarine;
  height: 100px;
  box-shadow: 10px 10px 20px #1e1b249f;
  z-index: 1;
}

.nav ul {
  font-size: 29px;
  margin-left: 65%;
  margin-top: 16px;
  float: right;
  justify-content: space-between;
}

li {
  list-style: none;
  padding: 10px;
  display: inline-block;
}

.nav ul li a {
  text-decoration: none;
  color: black;
}

.nav ul li:hover {
  text-decoration: underline;
  text-decoration-color: chartreuse;
}

.title {
  font-size: 33px;
  position: absolute;
  top: 23px;
  left: 43%;
  color: black;
}

.header1 {
  margin-top: 400px;
  top: 50px;
  border: 10px solid yellow;
  position: static;
}

.header1 img {
  width: 100%;
  height: 800px;
}

.heading {
  bottom: 300px;
  left: 40px;
  color: antiquewhite;
  height: 200px;
  width: 300px;
}

.heading h1 {
  text-decoration: underline;
  text-decoration-color: aquamarine;
}

.side {
  position: absolute;
  top: 550px;
  right: 20px;
  border: 20px solid red;
  width: 350px;
  height: 350px;
}

.side img {
  background-size: cover;
}
<div class="h">
  <div class="nav">
    <img src="logo.png" alt="">
    <h1 class="title font-effect-shadow-multiple">CSS Page</h1>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
  <br>
  <div class="header1">
    <img src="black-g51b181fe3_1920.jpg" alt="">
    <div class="side"></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Media Queries to Optimize Image Display for Higher Pixel Densities: @2x, @3x,

My current project involves supporting various pixel ratios on the website I am developing. I want to make sure that I include all necessary browser prefixes to ensure compatibility with a wide range of devices and browsers. While I am using SVGs whenever ...

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

I am experiencing an issue where the CSS file in the wwwroot directory does not update when I make changes to the code in ASP.NET MVC

Here is a link to my CSS file: Click here for image description This is how the file looks when built (no changes): Click here for image description Occasionally, running "clean-solution" and "build-solution" fixes the issue, but it's not working no ...

adjust the size of the textarea to perfectly fill the available space

I want my textarea within the wrapctxt container to always fill up the remaining space below the wrapctop section, reaching the bottom of the wrapc element. .panelb{ display:grid; grid-template-columns: 130px 34% auto; height:100vh; width: ...

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

Creating Dynamic Dropdowns with Bootstrap 5 Animation

I've been trying to add animation to a right-aligned Bootstrap dropdown using CSS, but I'm having trouble getting it to work. I attempted setting the transition property to target the element's width, but it doesn't seem to be effective ...

Is there a way to use flexbox to decrease the size of images?

Struggling to make my code mobile-friendly. The PC version looks good, but on mobile, the bio stretches and text goes off the page. I can't seem to get the picture to shrink when viewed on a mobile device, or have the content neatly boxed alongside it ...

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

The selected text on the webpage is not showing up highlighted

Encountering an unusual issue that is challenging to comprehend and difficult to find a solution for using Google search. I have created a website with multiple web pages. Each page follows the same format: header with links at the top, content area in th ...

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

The Bootstrap row fails to align elements side by side as intended

I'm trying to arrange elements in my navigation menu side by side, so I decided to use the row class from Bootstrap 5.0. However, they are still stacking on top of each other. I am currently working on a Flask project and using Jinja to some extent. ...

What's the best way to create flying text effects - using CSS or JavaScript

Looking for a way to enhance the user experience of my shopping cart on Android and iPhone/iPod, I want to implement a feature similar to the iTunes Store where the price flies down to the total when a purchase is made. Since I use jQuery (not UI) on this ...

The placement of the div only shifts in Firefox

Looking to place a small 25px - 25px image at the end of a line of text? Using a DIV (re1DOC) to position the element can make it easier. However, the issue arises when the element displays correctly in IE & Chrome, but not in Firefox. The text shifts slig ...

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

Generating Speech from Text using jQuery API in HTML

Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...

The sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Currently, in my navigation bar, I am attempting to make only the active or clicked list item appear bold when clicked. At the moment, I can successfully achieve this effect; however, when I click on other list items, they also become bolded, while the ori ...

The footer element rebels against its designated functionality

The standard structure follows: <body> <div class="wrapper"> <nav></nav> <myContent></myContent> </div> </body> <footer></footer> In this setup, the footer is expected to ...