The z-index is not functioning properly in terms of layering correctly

Seeking advice on z-index...
I'm experimenting with the code and trying to get my id="hidebar" to appear above the "content" and "content-inner" divs. Apologies if this is elementary, but I'm having some trouble =D

CSS structure file:

body
{
    margin: 0; 
    padding: 0;
    height:100%;
    width:100%;
    background-color: #FFF;
    z-index:-1;
} 
#content
{
    width: 100%;
    height: 640px;
    background-color:#060;
    position:relative;
    z-index:-1;
}
#content-inner
{
    width: 960px;
    height: 640px;
    background-color:#666;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index:-1;
}

#hidebar
{
    width: 100%;
    height: 50px;
    background-color:#0FF;
    position:relative;
    z-index:2;
}



#navbar
{
    width: 100%;
    height: 257px;
    background-color:#F00;
    position:relative;
}
#navbar-inner
{
    width: 960px;
    height: 257px;
    background-color:#666;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#footer
{
    width: 100%;
    height: 181px;
    background-image:url(images/gray-pixel.png);
    position:relative;  
}
#footer-inner
{
    width: 960px;
    height: 181px;
    background-color:#666;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#footer-small
{
    width:230px;
    float:left;
    height:100%;
    background-color:#999;
    position:relative;
}
#footer-large
{
    width:500px;
    float:left;
    height:100%;
    background-color:#CCC;
    position:relative;
}
#colour-bar
{
    width: 100%;
    height: 13px;
    background-color:#639;
    position:relative;
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,     pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s,     samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,     fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,     aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output,     progress, section, summary, time {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ul {
    list-style-type:none;
}
ul li a{
    font:700 49px/1.2em Arial, Helvetica, sans-serif;
    color:#fff;
    text-decoration:none;
    height:59px;
    display:inline-block;
    list-style-type:none;
    text-align:center;
    position::relative;
    vertical-align: baseline;
}

ul li a:hover{
    color:#e25709;
}
div.table 
{
    border: 0px solid black; 
    display: table;
    margin-left:auto;
    margin-right:auto;
}
div.tr {border: 0px solid black; display: table-row; }
div.td {border: 0px solid black; display: table-cell; }




h3
{
    color:#FFF;
    font-size:22px;
    font-family:Arial, Helvetica, sans-serif;
    padding-top:30px;
    padding-left:25px;
    padding-bottom:20px;
}

h4
{
    color:#FFF;
    font-size:13px;
    font-style:normal;
    font-family:Arial, Helvetica, sans-serif;
    padding-left:25px;
    padding-right:25px;
    line-height:1.2em;
}




Source Code: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/structure.css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>




<body>
    <div id="content">
        <div id="content-inner">
            <a href="index.html">
                <img src="images/logo.jpg"/ alt>
            </a>
        </div>
    </div>

    <div id="hidebar">
    </div>

    <div id="colour-bar"></div>
    <div id="navbar">
        <div id="navbar-inner">

            <ul>
                <li><a href="#" rel="1"><button1>About us</button1></a></li>
                <li><a href="#" rel="2"><button2>Partners</button2></a></li>
                <li><a href="#" rel="3"><button3>Solutions</button3></a></li>
                <li><a href="#" rel="4"><button4>Services</button4></a></li>
            </ul>
        </div>
    </div>
    <div id="footer">
        <div id="footer-inner">
            <div id="footer-small"></div>
                <div id="footer-large">
                    <div class="table">
                        <div class="tr">
                            <div class="td">
                                <h3>Contact Us:</h3>
                            </div>
                            <div class="td">
                            </div>
                        </div>
                        <div class="tr">
                            <div class="td">
                                <h4>AUS - Melbourne<br />
                                101 Main Street<br />
                                Glen Iris VIC 3146</h4>
                            </div>
                            <div class="td">
                                <h4>Email: [email protected]<br />
                                Phone: (03) 9888 8888<br />
                                Fax: (03) 9888 8888</h4>
                            </div>
                        </div>
                    </div>
                </div>
            <div id="footer-small"></div>
        </div>
    </div>

<script>
$("button1").click(function () {
$("h4").toggle("slow");
$("button1").toggle();
$("button2").show();
$("button3").show();
$("button4").show();
});

$("button2").click(function () {
$("h4").toggle("slow");
$("button2").toggle();
$("button1").show();
$("button3").show();
$("button4").show();
});

$("button3").click(function () {
$("h4").toggle("slow");
$("button3").toggle();
$("button1").show();
$("button2").show();
$("button4").show();
});

$("button4").click(function () {
$("h4").toggle("slow");
$("button4").toggle();
$("button1").show();
$("button2").show();
$("button3").show();
});
</script>

</body>
</html>





Any assistance would be greatly appreciated <3

cssz-indexlayer

Answer №1

If you would like #hidebar to be positioned above #contents and #content-inner, simply adjust the placement of #hidebar.

<div id="content">
        <div id="content-inner">
            <div id="hidebar">

            </div>
            <a href="index.html">
                <img src="images/logo.jpg" />
            </a>
        </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

Utilize a combination of min-height percentages and pixels on a single div element

Currently searching for a method to explain min-height: 500px; min-height: 100%; the reason behind my decision to utilize this? The div must be either 100% in size or larger to allow for overflow. The height should only be set to 500px when the screen i ...

css

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

I am having an issue with the bottom border starting from the extreme left of the page. I want it to start from the letter "T" in Tech instead. #page-container { width: 1250px; margin: 0 auto; } h2 { font-weight: normal; padding-left: 15px; ...

htmlcss

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

javascripthtmljquerycss

Position an image to the right with a specific height using position absolute in Bootstrap 4.3

enter image description hereI am in the process of updating my Bootstrap 4.0 CSS to Bootstrap 4.3 CSS. Within my price section, there are 3 pricing panels. One of these panels includes an image with absolute positioning and specific pixel coordinates - l- ...

htmlcssbootstrap-4

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

Attempting to retrieve the value of "id" using a "for...of" loop

I am seeking assistance with my auditTime function. In the loop using "for . . of", each element of the div HTML collection with the class name "time-block" should be iterated through, and the number value of that div's id should be assigned to the va ...

javascripthtmljquerycss

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

javascriptjqueryhtmlcssjqgrid

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

htmlcssreactjsnpm

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

javascripthtmlcsscanvas

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen. My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same size and just add a scroll bar. I ...

cssflexbox

Arranging the rows and columns of a table in optimal alignment

I am currently facing an issue with two tables. The first table consists of 2 rows and 4 columns, with the first column spanning 2 rows. However, in the visual representation, the last 3 columns are misaligned with the rows. How can this alignment be corre ...

htmlcsshtml-tablealignment

Subsequent pages are failing to load stylesheets

My HTML is not linking my CSS properly. I am using the Prologue template from html5up.com. In my main directory where index.html is located, I created a subfolder for the different products I want to display. This folder contains several files including 12 ...

htmlcss

Utilizing Skeleton to create a cropped text button on an iPhone

I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...

htmlcssskeleton-css-boilerplate

Conceal the standard style class of the p:selectOneRadio element

On my xhtml page, I've implemented p:selectOneRadio. However, I'm struggling to remove the default style class .ui-helper-hidden-accessible, resulting in the radio button icons not being visible. Here's a snippet of my code: <p:selectOne ...

cssjsfxhtml

Preserve page configurations upon page refresh

I'm currently in the process of creating a 'user settings' form. Each list item represents a different section, such as Updating username, Updating email, and Changing password. It looks something like this: <li> <header>Ti ...

javascriptphpjqueryhtmlcss

Changing the border color of a Bootstrap 5 button using custom CSS styling

I have been working on a page to control my amp using various JavaScript libraries. 1.) How can I change the blue border of a selected Bootstrap 5 button to a lighter green without using SCSS? Example: Repository (apologies for the mess, it's not t ...

cssbootstrap-5

I am encountering an issue while running npm run webpack in production mode where the CSS file is not being generated separately in the dist folder as expected. The file is not appearing as it should

Here is the code snippet from my webpack configuration file: const currentTask = process.env.nmp_lifecycle_event const path = require("path") const MiniCssExtractPlugin = require('mini-css-extract-plugin') const config = { entry: './ ...

cssnpmwebpackbuild

Guide to populating a select-option dropdown using CSS

I'm working on creating a dropdown menu in HTML that pulls the options from a CSS file. To accomplish this, I have assigned custom classes to each option and specified the option label in the CSS using the CUSTOM_CLASS::after{content: "";} r ...

htmlcssdrop-down-menuselect-options