When you scroll down, the image and text will appear above the fixed header

As a newcomer to HTML and CSS, I've been working on creating an eCommerce page. The header is fixed, but I've encountered an issue where the image overflows on it when scrolling down the page. If my approach seems odd or unconventional, I would appreciate any guidance or suggestions on how to improve it. Here's a screenshot of the issue:

https://i.sstatic.net/eKy4V.png

Below is the code snippet attached in this post.

* {
  margin: 0;
  padding: 0;
}

#header {
  width: 100%;
  height: 60px;
  background-color: #090;
  position: fixed;
}

#wrapper {
  width: 80%;
  background-color: #F7F4F4;
  margin: auto;
}

#main1 {
  ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
</html>

htmlcss

Answer №1

Your webpage elements are not properly ordered, resulting in the issue you are experiencing. To rectify this problem, consider applying a z-index property to the header.

Here is an example: z-index: 100;

#header {
  width: 100%;
  height: 60px;
  background-color: #090;
  position: fixed;
  z-index: 100; // adjust as needed
}

The default stacking order of HTML elements on the Z-axis can be influenced by various factors. Below is the typical sequence in a stacking context when items have no specific z-index applied:

  • Background and borders that establish a stacking context
  • Negatively stacked elements in chronological order
  • Non-positioned block-level elements in sequence
  • Non-positioned floated elements in sequence
  • Inline elements in sequence
  • Positioned elements in sequence

Correct usage of the z-index property can alter this natural stacking order, especially when overlapping elements are positioned accordingly.

See your corrected code below...

Answer №2

Update the #header element with the new property:

z-index: 99 !important;

Here's how you can implement it:

#header {
width: 100%;
height: 60px;
background-color: #090;
position: fixed;
z-index: 99 !important;
}

Answer №3

You have the option to utilize the z-index property to determine the stacking order of elements (the higher they sit in the stack). To learn more about this, visit https://developer.mozilla.org/en/docs/Web/CSS/z-index

In your scenario, by setting the z-index of #header to 2, you can achieve the desired outcome. Here is your code with that modification:

. . . . . .

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

Having issues with the functionality of the jQuery HTML function

I'm working on this jQuery code snippet: $('#wrapper').html('<img src="/loading.gif">'); var formdata = $("#validateuserform").serialize(); $.post("/userformdata.php",formdata,function(html){ if(html) ...

javascriptjqueryhtml

Introduction to Interactive HTML Pinball Game

As a beginner in the realm of computer science, I've recently embarked on creating a simple pinball game. My approach to maneuvering the flippers involves switching between images that depict the flipper in an upwards and downwards position by utilizi ...

javascripthtml

The React canvas within a CSS grid is not taking up the entire space

I'm currently developing a line plotter in React. This "line plotter" needs to be contained within a CSS grid item. I am utilizing the <canvas> element to draw the lines, but I'm unsure if this is the best approach. Is there a more efficien ...

javascripthtmlcssreactjscanvas

Validating phone numbers with regular expressions in Java

I recently started learning Java and Regex, and I'm currently facing a challenge with phone number validations. The task at hand is to create simple phone number validations. I already have an input field in my HTML code that has the attribute type=" ...

javaregexhtmljsp

Creating a grid of CSS/JavaScript circles

Trying to achieve something like this: It sounds simple, but there are specific requirements: - the width of the parent div should adjust according to the length of the text (is this feasible with CSS?) - random positioning of all circles is proving to be ...

javascriptcss

Using double quotes when adding HTML5 local storage entries

Currently, I am setting the value of a field to a variable like this: newUser = document.getElementById('userName').value; Then putting that variable into local storage: localStorage.setItem('userName', JSON.stringify(newUser)); Fet ...

jsonhtmllocal-storage

Distinguish using section class in Selenium

Currently grappling with a Python selenium issue, I need to extract and print an email address in my code: [email protected] Just looking for a hint... HTML: <section tabindex="-1" class="pv-profile-section pv-contact-info artdeco- ...

pythonhtmlselenium-webdriverweb

Maintaining aspect ratio while keeping images the same height and responsive

I have encountered a challenging issue that remains unresolved despite my extensive search for an answer. I have not found a solution in the "Questions that may already have your answer" section, nor have I discovered one elsewhere on the web. Here is the ...

jqueryhtmlcss

Best placement for transition effects in a dropdown menu animation

<div class="dropdown"> <button class="dropbtn">ALAT</button> <div class="dropdown-content"> <a href="index2.php"><img src="home.jpg" class="home" width="7 ...

htmlcssdrop-down-menucss-animationscss-transitions

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

jqueryhtmlcssstylesheet

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

htmlcssmobilesassresponsive

Launching various modals on marker click

I'm having an issue where I need a different modal to be displayed depending on the name in the markerSet array. Currently, the if/else statement is always returning the same modal. Take a look at the if statement in my JavaScript code below. The nam ...

javascriptjqueryhtmlarraysjvectormap

Enhance your web design with the latest Bootstrap 5.2

I attempted to implement a tooltip using jquery in my jquery datatable, but unfortunately the tooltip is not appearing. Below is the code snippet: render: function (data, type, row, meta) { var total = row.success + row.error; if (row.isConsumed = ...

htmldatatablesbootstrap-5

For JavaScript to run, it must be included in the HTML document and invoked externally using the <script src=...> tag

When it comes to my JavaScript code, I've encountered an interesting scenario where it only seems to run properly when it is both included in the HTML file and called externally like so: <script type="text/javascript" src="{{ url_fo ...

javascripthtmlflaskjinja2

What new skills should I acquire following my mastery of HTML and CSS?

I have a vision of creating a website similar to funcage.com, a site filled with funny pictures where users can register, upload their own content, vote, and leave comments. After dedicating myself to learning HTML & CSS for over a year and completing the ...

htmlcssweb

Discover the technique of accessing HTML/CSS toggle switch value in Golang

I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...

javascripthtmlcssgo

Calculation Error in JavaScript/JQuery

I've been working on a JavaScript function to calculate the sum of values entered into textboxes, but it seems to be giving me inaccurate results in certain cases. Check out the FIDDLE here Enter values : 234.32 and 32.34 Result: 266.6599999999999 ...

javascriptjqueryhtmlasp.net

Utilizing the HTML method of jQuery on a jQuery element

Currently, I am attempting to modify the inner html of an element. When I utilize the following code: $('.best-photos-button')[0].innerHTML="Add More Photos"; the change is successful. However, if I try to use .html() instead of ".innerHTML" in ...

javascriptjqueryhtmlcss

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

cssasp.net-mvcprinting

Designing a typical ReactJS project

I initialized a new react project using the command npx create-react-app my-app. When I checked the src folder of my project, I noticed both App.css and index.css files. However, none of these seem to be affecting the styling of my index.js file. Could s ...

cssreactjs