Is there a way to set the z-index independent of its parent element's stacking order?

Struggling with creating a Netflix logo using only pure CSS. I have a span element and its before pseudo-element. The issue is figuring out how to position .netflix span:nth-child(2) in front on the z-axis compared to .netflix span:nth-child(2):before. Is it possible to place elements on the z-axis based on any element we choose, rather than their parent elements? Any help would be appreciated. Here's my HTML code:

.netflix span {
  width: 50px;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: #e50914;
  margin: 0;
  padding: 0;
  top: 0;
  transform-origin: top left;
}

.netflix span:nth-child(1) {
  left: 0;
}

.netflix span:nth-child(2) {
  transform: skewX(26deg);
  box-shadow: 0 0 20px 13px rgba(0, 0, 0, 0.6);
}

.netflix span:nth-child(2):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: bottom right;
  transform: skewX(-25deg);
}
<div class="center netflix">
  <span></span>
  <span></span>
  <h1>NETFLIX</h1>
</div>

htmlcss

Answer №1

Depending on the specific scenario, the answer may vary, but generally speaking, yes, it is possible as long as you don't create a stacking context with the parent element. Both the parent and child elements must belong to the same stacking context for the child element to be positioned below its parent.

Here are some examples to provide more clarity:

Why can an element with a z-index value cover its child?

css z-index issue with nested elements

How can I display a header element above my content?

I have position but z index is not working

Furthermore, you can achieve your desired shape in a simpler way and avoid any potential complications related to the use of z-index.

.netflix {
  width:100px;
  height:200px;
  display: inline-block;
  background: 
    linear-gradient(#e50914,#e50914) left/20px 100%,
    linear-gradient(#e50914,#e50914) right/20px 100%;
  background-repeat:no-repeat;
  margin: 20px;
  z-index:0;
  position:relative;
  overflow:hidden;
}

.netflix:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:20px;
  transform: skewX(22deg);
  background:#e50914;
  transform-origin:top left;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.6);
}
<div class="netflix">
  
</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

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

JQuery problem with toggling the menu icon

I have a toggle control that switches between a menu icon and an X when clicked, displaying an overlay nav as well. The issue is: Clicking on any link in the overlay nav does not switch/toggle the X back to the default menu icon. In the code below, I inc ...

javascriptjqueryhtmlcssicons

The Angular Google map fails to show up when embedded into a SweetAlert2 popup

I am attempting to showcase a segment of Google Maps within a popup using sweetalert2. The HTML code snippet provided below works fine when directly placed in the HTML page, but fails to work within the alert. export function showGoogleMap() { swal({ ...

htmlangulargoogle-mapsgoogle-maps-api-3sweetalert2

The background colors are not extending to the full width of the screen

I am facing an issue in my CSS code while trying to create a footer. The background color is not filling the width of the screen, and I had encountered the same problem earlier. Here is how it looks: (https://i.sstatic.net/5VxYU.png) HTML Code: *{ ma ...

htmlcss

the fill color in the canvas element is malfunctioning

In the function I am working on, there is a loop that creates a canvas and sets the opacity within it. The goal is to also set the background color and then convert the canvas into an image. However, while the opacity is properly set on the canvas, the ba ...

javascripthtmlcanvas2d2d-context-api

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

htmlcsstwitter-bootstrap

Embed three.js content into an ASP.NET MVC application using iframes for a seamless viewing experience

Currently, I am using asp net mvc and have encountered an issue with my view. In this view, I am calling a controller method via ajax to retrieve a partial view that utilizes three.js rendering. The partial view is then placed within an iframe tag on the m ...

htmlajaxasp.net-mvcthree.js

Acquiring the output value from the cs function using Javascript

I've hit a roadblock in my coding journey while trying to display a message to the user indicating that their data has been saved. I have a C# function that runs an SQL procedure and returns a value. Here's the C# function: Sql p = new Sql( ...

javascriptc#jqueryhtml

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

javascripthtmlcssangulartypescript

The resize() function in jQuery triggers a stack overflow exception

I am trying to manage the resizing of a div on my website, but I am encountering a stackoverflow exception when using the resize function. Can someone please help me understand what I am doing wrong? For reference, here is a jsfiddle example: https://jsfi ...

javascriptjqueryhtmlcssstack-overflow

Choose the list item below

I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...

phpjavascripthtmlweb

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for ...

jquerycsshtml-lists

Tips for customizing the color of dropdown options?

Help needed with changing the color of dropdown items in my code: I am looking to change the color of Dr. Winthrop, Dr. Chase, and Dr. Sanders. Below is the HTML/Bootstrap code snippet: <li class="dropdown"><a href="#" data-toggle="dropdown"> ...

htmlcsstwitter-bootstrap

Modify the input background to be transparent when using an autocomplete form

Is there a way to make the background color of my input transparent when the browser autocompletes my form? Currently, it looks like the image I've attached. Does anyone know how to achieve this? I attempted to use the code below, but the background ...

htmlcss

Adjust the size of a SVG group by hovering over a separate HTML element

I need some help with implementing a scale effect on group elements within an SVG. The goal is to have the group element scale up when hovering over a list item, but I am running into issues with the positioning because of the translate property. Does any ...

javascriptcsssvg

Vertically align an image of unknown height using CSS, ensuring compatibility with IE9

.box { width : 100%; max-height : 300px; overflow : hidden; } img { width : 100%; } <div class="box"> <img src="banner.png" /> </div> I am faced with a challenge regarding the sizing of the image banner.png wit ...

htmlcssvertical-alignment

Connecting a .css file to a markdown .doc file

I have been attempting to incorporate some .css styling into my Rmarkdown file. To achieve this, I first created a notepad file containing the following code: #nextsteps { color: blue; } .emphasized { font-size: 1.2em; } Subsequently, I saved this fil ...

cssrr-markdown

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Perform basic arithmetic operations on the output of SQL queries or on information stored in a datatable

Consider a scenario where a query yields results like the following... **TYPE** **TOTAL** A 2 B 4 Now, if you want to perform calculations such as A/(A+B) -> 2/(2+4) and display the result on your website, would it b ...

c#htmlsqldatatable

How to center an image within a WordPress .php file

Could someone please assist with centering the image in the code snippet below? add_action('woocommerce_after_add_to_cart_button', 'add_content_on_add_to_cart_button'); function add_content_on_add_to_cart_button() { echo &qu ...

phpcss