What is the best way to ensure my header element is positioned above my h2 element on the webpage?

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="page-wrapper">
<header id="header"> 
  Hoppity Edits
    <div class="logo">
      <img 


header {
  font-family: "Comic Sans MS", cursive,  sans-serif;
  font-size: 50px;
  position: absolute;
  left: 600px;
  display: flex;
  justify-content: space around;
  margin-top: 40px;
}

.logo > img {
  width: 80px;
  margin-top: 5px;
  position: relative;
  right: 405px;
}

 header > nav {
   font-size: 20px;
    margin-top: -30px;
    width: 50%;
    display: flex;
    flex-direction: column;
  }

 ul {
  width: 25vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

#email-insert {
  font-family: "Lucida Console", Courier, monospace;
  font-size: 8px;
  justify-content: center;
  text-align: center;
}

#page-wrapper {
  position: relative;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="page-wrapper">
<header id="header"> 
  Hoppity Edits
    <div class="logo">
      <img 
      id="header-img"
                    src="https://i.pinimg.com/originals/ac/1a/cf/ac1acffaa7f87b31c94cfab729167efb.jpg"
      alt="hoppity-logo"/>
    </div>
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href=#photo-shop>
        Photo Shop</a>
      <li><a class="nav-link" href=#scrapbookex>
        Scrapbooks</a>
      <li><a class="nav-link" href=#pricing>
        Pricing</a>
  </nav>
    </header>
  
 <section id="email-insert">
   <h2> A family company founded on family principles
    </h2>
  <form id="form">
    <input id="email"
     placeholder= "Enter email to get started"
     required>
    </input>
   </form>
  </section>
</div>

      id="header-img"
                    src="https://i.pinimg.com/originals/ac/1a/cf/ac1acffaa7f87b31c94cfab729167efb.jpg"
      alt="hoppity-logo"/>
    </div>
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href=#photo-shop>
        Photo Shop</a>
      <li><a class="nav-link" href=#scrapbookex>
        Scrapbooks</a>
      <li><a class="nav-link" href=#pricing>
        Pricing</a>
  </nav>
    </header>
  
 <section id="email-insert">
   <h2> A family company founded on family principles
    </h2>
  <form id="form">
    <input id="email"
     placeholder= "Enter email to get started"
     required>
    </input>
   </form>
  </section>
</div>






//CSS
header {
  font-family: "Comic Sans MS", cursive,  sans-serif;
  font-size: 50px;
  position: absolute;
  left: 600px;
  display: flex;
  justify-content: space around;
  margin-top: 40px;
}

.logo > img {
  width: 80px;
  margin-top: 5px;
  position: relative;
  right: 405px;
}

 header > nav {
   font-size: 20px;
    margin-top: -30px;
    width: 50%;
    display: flex;
    flex-direction: column;
  }

 ul {
  width: 25vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

#email-insert {
  font-family: "Lucida Console", Courier, monospace;
  font-size: 8px;
  justify-content: center;
  text-align: center;
}

#page-wrapper {
  position: relative;
}
htmlcss

Answer №1

Modify your header by replacing absolute with relative, similar to the code snippet provided. I have made the changes as requested, however, I must point out that your code structure is quite disorganized and needs some attention. The excessive use of position in your CSS is a notable issue.

header {
  font-family: "Comic Sans MS", cursive,  sans-serif;
  font-size: 50px;
  position: relative;
  left: 600px;
  display: flex;
  justify-content: space around;
  margin-top: 40px;
}

.logo > img {
  width: 80px;
  margin-top: 5px;
  position: relative;
  right: 405px;
}

 header > nav {
   font-size: 20px;
    margin-top: -30px;
    width: 50%;
    display: flex;
    flex-direction: column;
  }

 ul {
  width: 25vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

#email-insert {
  font-family: "Lucida Console", Courier, monospace;
  font-size: 8px;
  justify-content: center;
  text-align: center;
}

#page-wrapper {
  position: relative;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="page-wrapper">
<header id="header"> 
  Hoppity Edits
    <div class="logo">
      <img 
      id="header-img"
                    src="https://i.pinimg.com/originals/ac/1a/cf/ac1acffaa7f87b31c94cfab729167efb.jpg"
      alt="hoppity-logo"/>
    </div>
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href=#photo-shop>
        Photo Shop</a>
      <li><a class="nav-link" href=#scrapbookex>
        Scrapbooks</a>
      <li><a class="nav-link" href=#pricing>
        Pricing</a>
  </nav>
    </header>
  
 <section id="email-insert">
   <h2> A family company founded on family principles
    </h2>
  <form id="form">
    <input id="email"
     placeholder= "Enter email to get started"
     required>
    </input>
   </form>
  </section>
</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

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually. For instance, take the navigation drop-down button styling: <span ...

javascriptcssreactjsnext.jstailwind-css

Mobile Image Sizing with Bootstrap 4 Cards

I am currently developing a responsive web application using Bootstrap 4 and incorporating cards with images on one of the pages. The layout functions properly when resizing the window on desktop view; however, upon viewing it on mobile devices, I noticed ...

htmlcssbootstrap-4

The background size does not adjust to the size of the viewport

I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...

javascripthtmlcssthree.js

Using AJAX to submit an HTML form containing a file input

Is it possible to use AJAX to submit a form that includes a file type input? I'm attempting to achieve this using jQuery, but it seems that the file cannot be serialized during submission. Could this be a security feature implemented by the browser? A ...

jqueryhtmlajaxformsbrowser

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml

Steps for modifying form entries in a modal

I have a form that is accessed via a modal as described in the following code snippet. By clicking on new-lesson-plan-modal, I am able to use the generated form to input a new post entry, which will then be displayed back on the HTML. My query revolves a ...

htmldjangobootstrap-4

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui

How can I retrieve the row index in an Angular Mat-Table that has expandable content?

Having a mat-table with expandable content on a page, I am seeking a solution to record the row number of the table when clicked. While I successfully achieved this with a regular table in the HTML file using: <tr mat-row *matRowDef="let row; columns: ...

htmlangulartypescriptrow

How can we incorporate tab stops using jQuery?

Is there a way to stop the tab navigation when it reaches a button, rather than skipping fields using tabindex="-1"? For example, if my focus moves from input field A to Email and then to the button labeled "sdfsdf", I want to prevent moving to the test i ...

javascriptjqueryangularjshtml

ChangeToWebCode <td> Class

My PowerShell functions are designed to collect system statistics, convert them into HTML fragments, and then merge everything into a single HTML file at the end. While some functions are working perfectly fine, I'm encountering an issue with specifi ...

htmlpowershellpowershell-4.0

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

htmlcsscss-floattext-decorations

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

csshtmltwitter-bootstrap-3

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...

htmlcss

Issue with extra spacing within a div element in Bootstrap 5

Why is there extra spacing on the right side of my div? The image and text are supposed to take up 50% of the screen each. However, for some reason, there is additional spacing on the right that prevents this from happening. I am using Bootstrap 5. Click ...

htmlcssbootstrap-5

The website appears as I envisioned it when using Raw HTML, but when implementing Django, a strange blank space materializes within the for loop

<div id="Project" class="bg-white fnt-white brdr project-div "> <div class="float-left image-for-project-container brdr"> <img src="{% static './Images/manworking.webp' %}" ...

htmlcssdjango

Tips for correctly referencing a table row in a jQuery/Ajax function in a PHP program

I'm facing a challenge trying to instruct my jQuery function (embedded in a php program) to recognize the correct row in a dynamically generated table showcasing a photo in each row. My goal is to load the tags associated with a photo, through the Aja ...

javascriptphpjqueryhtmlajax

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

javascripthtmlcssd3.js

Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image. Despite my attempts with the following code, it did not yield the expected result: .background-image { border :0px; background-image: url(/images/icon.png); ...

css

Tips for eliminating the border from a Bootstrap dropdown menu in the navigation bar

I am utilizing the Bootstrap 5 navigation bar and trying to figure out how to remove the blue border from the "Dropdown" when clicked on. Despite my efforts to find a solution, I have been unsuccessful. <nav class="navbar navbar-expand-lg navbar ...

htmlcssbootstrap-5