CSS Trouble with Stacking Order

Seeking assistance with my learning/practice journey, any help is greatly appreciated. Please feel free to point out errors or inefficiencies.

I currently have four layers in place:

.body .main .main-side .sidebar

Here is the design I'm trying to replicate. Most elements are working fine except for the third layer (the navy blue bar on the right side). I am having difficulty positioning it between the second and fourth layers, specifically above the light blue inner box and below the smaller yellow side box. Any advice would be welcome!

Provided below is the HTML and CSS code for reference.

<!doctype html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <title>CSS Zen Garden</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
.
.
.
htmlcss

Answer №1

To achieve the desired effect similar to the example you provided, simply move the .main-side element into .main. This will allow you to adjust the z-index and make it overlap as needed. Here are the updated values:

.main-side  {
  background: rgba(58,68,83, .8); //changed to rgba for a faded background
  position: absolute;
  right: -150px; //changed to 'right' instead
  height: 2400px; //updated value
  top: -200px;
  width: 30%;
  z-index: 1;
}

I've also converted some of the colors to rgba to give it a transparent appearance.

FIDDLE

Answer №2

It seems like there may be some confusion in your question, but I can offer a few suggestions that might help. In order to achieve a similar effect to the yellow menu you mentioned, consider using the following CSS code:

.sidebar    {
    background: #e9f198;
    position: absolute;
    top: 70px;
    right: -100px;
    width: 25%;
    font-size: 18px;
    line-height: 200%;
    letter-spacing: -.01em;
    padding-right: 40px;
    z-index: 4;
}

By implementing these changes, your sidebar should now resemble the one you referenced.

Do these adjustments bring you closer to the desired outcome?

.main   {
    background: #77c4d3;
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 2;
    height: 5000px;
}

.main-side  {
    background: #3a4453;
    position: absolute;
    left: 900px;
    height: 2000px;
    top: 70px;
    width: 30%;
    z-index: 1;
}

In addition, I have created a JSFIDDLE for you to refer to in future queries like this!

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

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

htmlcss

Attempting to align DIV horizontally in the center

I am currently attempting to horizontally center the div with the id "lastrow". <div class="container"> <div class="row" style="text-align:center"> <div class="col-md-12">Name: <input type="text" id="name"><span class="v ...

htmlcssbootstrap-4

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

Tips for incorporating razor isolated/code behind CSS classes into MudBlazor components

Within my codebehind file, I have defined a CSS class. When I use the "class" attribute on normal HTML elements, the style is applied correctly. However, if I apply the class to a MudElement using the "Class" attribute, the style does not get pulled. Altho ...

cssblazormudblazor

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

phpjqueryhtmlmysqlcss

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

What is the best way to extract the post ID from an HTML form and pass it to the views

I am currently working with Django, jQuery, and Ajax. However, I am facing a dilemma regarding how to retrieve the post id in ajax data and utilize it in views.py. Below is the code snippet along with explanatory comments that illustrate the issue I am enc ...

htmljquerydjangoajaxdjango-templates

Issues with the Bootstrap date time picker functionality

Even though I have added all the necessary libraries for the date time picker, it still isn't working properly. You can check out this fiddle to see the code. <div class='input-group date' id='from_time'> <input type ...

jqueryhtmltwitter-bootstrap-3datepicker

Strategies for avoiding overflow-x issues in Safari and mobile devices

I am currently facing an issue where I have a div containing a table with overflow enabled, allowing the whole table to be viewed by scrolling. However, on Safari and mobile Safari browsers, there is a horizontal scroll on the html and body elements. Whil ...

htmlcssreactjshtml-tablereact-bootstrap-table

Changing the color of a div while implementing a show and hide effect in JavaScript

I have designed a checkout system with three distinct parts - shipping information, billing information, and order confirmation. These sections are all on the same page, allowing for a seamless flow during the checkout process. Once a customer completes t ...

javascriptjqueryhtmlcss

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

Difficulty in pinpointing hyperlinks within a styled list

My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows: <div id="sidebar_tall"> <ul> <li class="active_item"> ...

htmlcss

Designing a custom HTML calendar

I am currently working on a school project where I am creating a calendar using HTML. So far, I have set up the basic structure of the page. What I want to achieve is a functional calendar where users can create appointments that will be displayed accordi ...

javascriptjqueryhtmlcsscalendar

The second pop-up modal fails to appear

I have successfully implemented 2 modal windows with the help of bootstrap. The first modal is used for adding a user to the database, and the second one is meant for editing an existing user. While the first modal works perfectly fine, the editing modal d ...

javascripthtmljquerycssbootstrap-modal

Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the ...

cssinternet-explorerwebfonts

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

javascriptcssextjs

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

htmlcss

Is it possible to center the image and resize it even when the window is resized?

My goal is to position an image in the center of the screen by performing some calculations. I've tried using: var wh = jQuery(window).innerHeight(); var ww = jQuery(window).innerWidth(); var fh = jQuery('.drop').innerHeight(); var fw = jQ ...

javascriptjqueryhtmlcss

Could it be that v-show does not function properly on elements that are not dynamic

I'm not experienced in web development and this is my first attempt at using a web framework. The framework I am currently learning is vue.js version 3. My goal: I want to create 4 app instances (nav, defaultApp, bootstrapApp, vueApp). When I select ...

javascripthtmlvue.js

Assigning a value and specifying the selected attribute for an options tag

Trying to understand the challenge of setting both a value and a selected attribute on an options tag. Each one works independently, but not together. For example: <select> <option *ngFor="let item of items" selected [ngValue]="item"> ...

angularhtmlangular6