The slideshow element on my website is not positioning itself behind the fixed header element

I have a slideshow on my homepage that is not moving behind the fixed header when scrolling down, although it does correctly on all other pages of the website.

Below is the HTML code:


   <body>

   <div id="wrapperfull">

   <div id="head">

   <div id="header">
   <a href="index.html"><img src="../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a>
   </div><!-- end header div -->

   <div class="navigation">

       <div class="menu-holder">

           <ul class="menu">

        <li><a href="index.html">HOME</a></li>

        <li><a href='print.html'>WORK</a>
      </li>

        <li><a href="photography.html">PHOTOGRAPHY</a>
      </li>

        <li><a href="blog.html">BLOG</a>
      </li>

        <li><a href="inspired.html">INSPIRED</a>
      </li>

           </ul>
       </div>
       <!-- menu-holder end -->
   </div><!-- end navigation div -->     

   <div class="container">

       <!-- START: slideshow -->

       <ul class="slideshow">
         <li class="" style="opacity: 0.7021717977643726;"> <img src="../Images/P7158711.jpg" alt="Treetopnews" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
         <li class="show" style="opacity: 0.2971101211669;"> <img src="../Images/NCSY/NCSY4.jpg" alt="NCSYbooklet" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
    <li class="" style="opacity: 0;"> <img src="../Images/Aish/AHC3.jpg" alt="Aishcalendar" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
            <li class="" style="opacity: 0;"> <img src="../Images/P7168759.jpg" alt="Grahamallcott" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
       </ul>
   </div>

    <!-- END: slideshow -->

<div class="blog-container">

           <p2>
      <p>I'm Just Joel, a 33 year old graphic and web designer from hertfordshire. I have over nine years of commercial experience and have developed a wide range of skills within branding, marketing, editorial design, web design & corporate literature. I have strong passion for design and am always looking for new things to create, being inspired by all things around me.</p>
...

Here is the CSS code:


    #wrapperfull {
min-height: 100%;
width: 1050px;
...
#social img{
padding-right: 10px;
float: right;
    }

We appreciate your assistance! Thank you.

jqueryhtmlcsscss-position

Answer №1

To control the stacking order of elements on a webpage, you can utilize the CSS property z-index. This is particularly useful when organizing elements like headers and slideshows that overlap in the layout.

If you want to dive deeper into the topic of z-index, check out this resource:

Remember, it's crucial to specify the position of elements alongside z-index for them to interact correctly with other positioned and z-indexed elements on the page.

Answer №2

To enhance the layering of elements, add a z-index property to the CSS selector #head.

#head {
  height: 100px;
  width: 1050px;
  border: none;
  margin: auto;
  background-color: #FFF;
  position: fixed;
  z-index: 1;
}

Review the changes here

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

Unable to submit multiple selections from select2 using fromdata to upload a file

I am using an HTML select2 element that allows multiple options to be selected: <div class="form-group"> <label class="col-sm-1 control-label no-padding-right" for="form-field-recipient">Recipient:</label> <div class="col-sm-6 ...

phpjquery

How can I align text to the bottom right and left corners at the same time?

Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer? For example: JANUARY (bottom left corner) / 2019 (bottom right corner) If anyone knows how to achieve this using HTML ...

htmlcsssticky-footertext-alignment

Unable to retrieve the value of a selected table cell from dynamically generated HTML tables

I've gone through a plethora of Google and Stack Overflow examples To showcase my problem, I have set up a fiddle. Issue: "Upon clicking on a person's name, I want to retrieve their name from the first column." While I managed to create a click ...

javascriptjqueryhtmlcss

Guide on incorporating an inline input and glyph icon within a table cell using Bootstrap 3

How do I align my glyph icon in the same line as an input in Bootstrap3? I've tried various classes but none seem to work. The glyph icon keeps displaying on a separate line because the input is too long. The only solution that works is manually setti ...

csstwitter-bootstrap-3

Count divisions using PHP and the LI function

I'm struggling with a loop that is responsible for displaying <li> elements, and I need to incorporate a new class into the first item, as well as every sixth subsequent <li> element. For example: while ($db_field = mysql_fetch_assoc($re ...

phpmysqlhtml

Ensuring a consistent height for a Angular JS Auto Complete feature

The ng2-auto-complete results appear to be lengthy. When I try to inspect and apply some CSS, the results disappear upon clicking. To address this issue, I experimented with the following code: ng2-auto-complete{ height: 400px; overflow-y: scroll ...

javascriptjqueryhtmlcssangular

Apply specific classes to elements when they become visible on the screen

I am currently utilizing a script that adds a class to a div once it enters the viewport. The issue I am facing is that this script applies to multiple divs, causing the class to be added to all of them once the first one is visible. Is there a more effici ...

javascriptjquery

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

Troubleshooting Bootstrap v4.4: Issues with Collapse Transition

I'm trying to add Bootstrap Collapse to my table data. However, when I click the button, the table data collapses, but without any transition effect. I've double-checked that I have included jQuery, used collapse (not collapse in), and added aria ...

htmljquerycssbootstrap-4

Error occurs in IE6 when trying to remove the "selected" attribute using the removeAttr()

When working with two listboxes where items are moved from the first to the second, how can I prevent selection in the second listbox once an item is added? This is the code snippet I used: $("#<%=lbCommcatTo.ClientID%> option").removeAttr("selecte ...

jqueryinternet-explorerselection

selector that applies to every single element

I am currently working on a custom listbox feature that should set the selected value in the active textbox. However, I am encountering an issue where it is affecting all the textboxes on the page (two in my example). Here is my JQuery code: $(".txtList") ...

jquery

Bootstrap grid for thumbnails

I am attempting to create a responsive grid with thumbnails using Bootstrap and Knockout. Here is the current HTML code: <div class="row"> <!-- ko if: toys().length == 0 --> <div>No toys in category</div> <!-- /ko -- ...

htmlcsstwitter-bootstrapknockout.js

Changing the order of rows and columns with CSS3 and DOM manipulation

I have implemented the following CSS code to alternate the background color of li elements. However, I am facing an issue where I need the CSS styling to remain consistent even if the rows have the .hidden class applied to them (with .hidden class having d ...

csscss-selectors

The issue with the client-side jQuery button click is that it is not fully refreshing all elements on the ASP.NET page

Encountering an issue with the ASP.NET button click event on the client side. <asp:Button ID="btnSaveInput" runat="server" Text="Save" CssClass="hidesave"/> $("body").on('click', "#<%= btnValidate.ClientID%>", function () { ...

jqueryasp.net

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

javascriptclasshtmlfacebook-like

Create a dynamic jQuery gallery with generated content

Currently I am working on a personal project and facing challenges in creating the correct markup using jQuery. I have an operation that provides a list of images to be displayed in this JSON format: [{ "Id": imageid, "imagePath": path to image, ...

javascriptjqueryhtmlasp.net-mvcjson

Calculate the pixel distance between various divs by measuring the horizontal distance from the left border to the right

I am trying to find the precise distance between : #main div left edge to the first div with class="b" between the first div with class="b" to the second div with class="b" It's worth noting that the divs may be arranged randomly and could have fix ...

javascriptjqueryhtmlcss

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

javascripthtmlnode.jsexpress

Determine the value of a checkbox as 0 if unchecked and 1 if checked

How can I retrieve a value of 1 when a checkbox is checked and 0 when it is unchecked? <input type="checkbox" name="data[color][]" class="color" value="1" checked> The data array stores information from in ...

phphtml