The DIV element is not visible on the page, and the z-index property does not seem to be working

I am attempting to replicate the diagonal stripe layout using CSS, similar to the design shown here:

Here is my codepen: http://codepen.io/Chiz/pen/zvWRNW

Although my layout appears acceptable, the issue lies in the "div class="blacktop" not displaying. My intention is for it to overlap the gray div, but it appears that the z-index is ineffective even after setting position:relative to all DIVs.

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
}
<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

htmlcsscss-transforms

Answer №1

When the first two divs in your HTML are not floating, they will have a height that pushes the subsequent div down. If you remove the overflow:hidden property from the body, you will be able to see the black div.

In short, to ensure the blacktop div appears above the background divs, you can set its position to absolute.

Here is an example: http://codepen.io/anon/pen/rOdJQr

HTML:

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

CSS

@mixin prefix ($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

body
{
  overflow:hidden;
}

div
{
  position:relative;
}

div.gray
{
  width:135%;
  height:450px;
  background-color:gray;
  margin:-10px 0 0 -140px;
  z-index:100;
  @include prefix(transform, skew(-20deg,-20deg));
  @include prefix(transform, rotate(8deg));
}

div.blackbottom
{
  @extend div.gray;

  margin-top:-100px;
  background-color:white;
  z-index:200;
  @include prefix(transform, rotate(17deg));
}

div.blacktop
{
  position: absolute;
  bottom: 10px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
}

Answer №2

I made adjustments to the shared settings for the .blacktop class, aligning it with the styling of the other two div elements. By updating your CSS as shown below, the changes will be visible.

div.blacktop
{
  @extend div.gray;

  top: -500px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
  @include prefix(transform, rotate(17deg));
}

Here's the snippet for better understanding:

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom, div.blacktop {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  top: -500px;
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}
<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></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

Popovers in Bootstrap 4 do not have clickable Custom Forms

I find it strange that in Bootstrap 4, only custom forms are not clickable in the Bootstrap popover. It's interesting how default forms in Bootstrap 4 work just fine. Any suggestions on how to resolve this issue? Below is my code. Thank you for you ...

javascripthtmlbootstrap-4frontend

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

I am currently developing a web search engine that utilizes the Giphy API... However, I've encountered difficulties with the button function. I have created buttons to modify the page format and adjust the number of search results displayed.... The We ...

javascripthtmljquerycss

"Discover the magic of creating a navigation menu with jQuery toggle - let me show

Recently, I managed to create a side navigation using the target function in CSS3. However, I am curious about how I can achieve the same result using jQuery without disrupting the layout. Any assistance would be greatly appreciated. Here is the code sni ...

jqueryhtmlcss

Is there a way to change the color of a specific tab without affecting the content within it

I am attempting to change the color of an individual tab using jQuery. However, when I set the background attribute in CSS, it colors the entire background instead. What specific property should I be setting to only change the color of the tab itself? ...

javascriptjqueryhtmlcss

Tips for arranging buttons horizontally in Angular

After adding a third button, I noticed that the buttons were now displaying in a column instead of a row. html: <div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator"> <div *ngIf="isChannelE ...

htmlangularjsmaterial-ui

Vue.Js allows developers to easily set a default selected value in a select dropdown menu

Having trouble with getting the default selected value using select in VueJs. I've attempted two different approaches: Using id and v-model fields in the select like this: <select v-model="sort_brand" id="sort-brand" class="form-control"> ...

htmlselectvue.jshtml-select

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; te ...

htmlcsscss-shapes

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

I am currently developing a user script that is designed to operate on https://example.net. This script executes fetch requests for HTML documents from https://example.com, with the intention of parsing them into HTML DOM trees. The challenge I face arise ...

javascripthtmldomparser

CSS code preventing hyperlink from functioning

My website is almost complete, but I'm running into an issue with some hyperlinks on my event registration page. The first link works fine, but the second one does not. To troubleshoot, I created a test page with just the two links and still encounter ...

htmlasp.netcss

a tag's functionality remains unchanged by its class association

In my Laravel project, I am attempting to create an active class for a link tag, but the class is not affecting the link. Below is the code snippet from my blade file: <li class="{{ (request()->is('categories*')) ? 'side-active&ap ...

cssbootstrap-4laravel-blade

Clicking on the spinner does not activate it

I've implemented a basic spinner on my website, and it works fine when using the keyboard. However, I'm experiencing issues with mouse clicks. I can't seem to figure out what is causing this problem. Below is the code snippet related to the ...

jqueryhtmljquery-ui-spinner

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

I am utilizing ASP.NET MVC as the server and Angular as the client application. Instead of a static index.html file, I have index.cshtml. The styles I am using are global styles rather than component-scoped. My query revolves around working with a bunch ...

cssangulartypescriptwebpackecmascript-6

Tips for adjusting large resolution images to fit all screen sizes without exceeding the boundaries of the screen

I am in the process of creating a set of HTML pages specifically tailored for iPad Air and iPad Mini. These pages will feature several large images, with dimensions such as 1600x300. However, upon testing in Windows browsers, I encountered an issue where t ...

htmlcssipad

Implementing change event to activate select dropdown with jQuery

Is there a way to modify the code so that select2 and select3 are disabled by default, but become enabled only when an option is selected in the previous select dropdown (excluding the placeholder "Select your option")? In addition, I want the first place ...

javascriptjqueryhtml

Issue with highlighting when one string overlaps with another

I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...

javascriptjquerycssangularjshtml

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

htmlcsscss-gridbootstrap-5

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass