• 0

Can you create a child element with a higher z-index than its parent?


Question

Here's the problem in the form of a fancy picture (isn't it beautiful?):

post-310118-0-56895000-1298254664.jpg

Each rectangle is a div tag and I'll refer to them by their colours. Black is the main content of the page and has to be below red which is the footer. However I have an image (green) within red which extends over the text in black but must always lie below the text. The text in black is contained within a span tag (but this could be a div as well if it needs to be).

My question is, is it possible to give black a z-index of, say, 1; red a z-index of 2; green a z-index of 3; and the text a z-index of 4?

This would make the above picture possible. However, browsers won't allow a child element to have a higher z-index than its parent so the above is not possible. The text always has an inherited z-index of 1, and therefore lies below green.

Is there a workaround?

P.S. I realise this can be a bit confusing to understand, hence the picture.

7 answers to this question

Recommended Posts

  • 0

Yeah unforunately it's actually not - assuming that the text is inside the black div. It doesn't matter what the z-index of the text is set to, it will always inherit the z-index of its parent div and will therefore have a lower z-index than the green div.

This is my example code which outputs the diagram above but shows that the text always lies below the green div even though it has a higher z-index:

<html>
  <head>
    <style type="text/css">
      #black {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: black;
        z-index: 1;
      }

      #text {
        color: white;
        z-index: 4;
      }

      #red {
        position: relative;
        margin-top: -100px;
        margin-left: 25px;
        width: 350px;
        height: 200px;
        background-color: red;
        z-index: 2;
      }

      #green {
        position: absolute;
        top: -150px;
        right: 50px;
        width: 50px;
        height: 200px;
        background-color: green; 
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <div id="black">
      <span id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </span>
    </div>

    <div id="red">
      <div id="green"></div>
    </div>
  </body>
</html>

  • 0

Would it be possible to separate the text in the black div from the div itself, put it into a div of its own as a child of <body> or whatever, and then give that a higher z-index, background: transparent; and absolute position things to line them up? Just a thought.

  • 0

Yeah I thought of that, and it's basically a good idea, but the content of the black div is loaded by AJAX and so the length is undetermined. I'd have to use javascript to measure the height of the div containing the text and then make the black div that same height. Perfectly possible, yes. But is it really necessary?

  • 0

I found this to be an intriguing question, so I gave this a try. Have a look at it here.

Here's how it's done:

  • There's no background set on #black, the background is simply transparent. Instead, the background color is done by adding an extra element (#black:before) and absolutely positioning it so that it has the same position and size as its parent. This element then gets the black background color set.
  • To make the black background layer #black:before go behind the text, its z-index is set to a negative value. Since the text is separate from the background, this z-index causes the text to be on top of the background layer.
  • #red and #green can now assume negative z-indexes between the z-indexes of #black and #black:after to make them appear between the background and the text.
    If only one background box is needed, you might want to consider using #black:after instead and get rid of the meaningless HTML.

Known issues:

  • Doesn't work in Internet Explorer. :pinch:
    It appears that in IE, the :after element is created as a child rather than a sibling and as such, #red and #green cannot be placed between those two z-indexes.

The problem lies in setting the position and size of the background layer when this layer is not a child of the text layer. If the text layer has a fixed position and size, you can simply copy these over to the background layer. However, with flexible layer heights, I don't see a way to match the size of a sibling.

We couldn't do it for layout columns and so we had to use techniques like faux columns or floats with clears to make two columns appears to have equal heights. It appears that this problem is very similar to the columns issue.

Perhaps someone finds a better solution?

  • 0

It is possible just like I mentioned earlier. Don't need js height calculations. Need to assign z index only to one element.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">t;html xmlns="http://www.w3.org/1999/xhtml">t;head&gt;
	&lt;title&gt;&lt;/title&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
	&lt;style type="text/css"&gt;

*	{
	margin: 0;
	padding: 0;
}
body	{
	padding: 20px;
}
#wrap	{
	width: 920px;
	margin: 0 auto;
}
#content	{
	color: #fff;
	background: #000;
	padding-bottom: 20px;
}
#content p	{
	z-index: 2;
	padding: 50px;
	position: relative;
}
#footer	{
	padding: 20px;
	height: 150px;
	background: #f00;
	margin: -50px 50px 0 50px;
}
#green	{
	width: 50px;
	float: right;
	height: 240px;
	display: block;
	margin-top: -150px;
	background: green;
}

	&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="wrap"&gt;
	&lt;div id="content"&gt;
		&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
	&lt;/div&gt;
	&lt;div id="footer"&gt;
		&lt;span id="green"&gt;
		&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

  • 0
  On 21/02/2011 at 16:54, sweetsam said:

It is possible just like I mentioned earlier. Don't need js height calculations. Need to assign z index only to one element.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

Your version is very good, but I'm having trouble recreating it with my demo... This is my new code:

&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      #black {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: black;
      }

      #text {
        color: white;
        z-index: 5;
      }

      #red {
        position: relative;
        margin-top: -100px;
        margin-left: 25px;
        width: 350px;
        height: 200px;
        background-color: red;
      }

      #green {
        position: absolute;
        top: -150px;
        right: 50px;
        width: 50px;
        height: 200px;
        background-color: green;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="black"&gt;
      &lt;span id="text"&gt;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      &lt;/span&gt;
    &lt;/div&gt;

    &lt;div id="red"&gt;
      &lt;div id="green"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

The green div is still above the text.

Ah don't worry, it works now. I just added "position: relative" under #text and it works now - thanks a lot!

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Shouldn't using "High Performance" mode prevent c-states from initializing? Maybe AMD hasn't built a proper power plan for their x3d processors like they used to for their ryzen chips.
    • Vivetool also has a GUI. Literally took me three clicks to enable this from there.
    • Microsoft Weekly: OneDrive horror stories, ramblings about Start menu, and more by Taras Buria This week's news recap is here, delivering you a roundup of the most important Microsoft stories, including a bunch of odd stuff and bugs in Windows, OneDrive horror stories, ramblings about the Start menu, a couple of new Windows 11 preview builds, important news from AMD, and a lot more. Quick links: Windows 10 and 11 Windows Insider Program Updates are available Reviews are in Gaming news Windows 11 and Windows 10 Here, we talk about everything happening around Microsoft's latest operating system in the Stable channel and preview builds: new features, removed features, controversies, bugs, interesting findings, and more. And, of course, you may find a word or two about older versions. Microsoft released a new out-of-band update to fix boot issues on certain Surface devices. The company announced certain Windows 365 updates, such as VBS and HVCI support (by default) and app provisioning in Windows 365 instead of entire cloud PCs. Microsoft is also removing legacy drivers from Windows Update in a new "strategic move." This is the default Windows 365 wallpaper On the negative side, we have the latest Patch Tuesday updates breaking the DHCP Server in all Windows Server editions. Also, there is some bad news for PC users with Windows Hello cameras: after the April 2025 Patch Tuesday updates, Windows Hello does not work in the dark. The change was quietly introduced to address security issues. Windows Goodbye That is not all, though. As it turned out, solid-state drives from WD could still block your computer from installing Windows 11 version 24H2, which was released in October 2024. Also, Microsoft's Family Safety feature is now blocking Chrome, for some reason. Here is an editorial from Usama Jawad (welcome back) about how, four years after the initial release, Windows 11 still does not offer strong enough reasons to upgrade from the outgoing Windows 10. Also, Usama shared his thoughts about the Start menu and why he had stopped caring about its changes altogether. Speaking of the Start menu, check out our overview of what users wanted from Microsoft and what the company delivered in the redesigned Start menu, which was recently announced. Windows Insider Program Here is what Microsoft released for Windows Insiders this week: Builds Canary Channel Build 27881 This week's Canary build introduced context menu improvements, new accessibility features, Settings app tweaks, and more. Dev Channel Nothing in the Dev Channel this week Beta Channel Nothing in the Beta Channel this week Release Preview Channel Build 26100.4482 (KB5060829) This build improves File Explorer and search performance, adds some changes to default browser settings, and fixes multiple bugs. Some hidden stuff in the recent Windows 11 preview builds includes a new adaptive battery saver. This feature dynamically adapts battery saver mode according to your workflow, but in its current form, it is not fully operational. Even though Microsoft acknowledged its existence, the adaptive part still needs improvements. Another useful change in the recent builds is the return of a clock in the notification center. This time, however, Microsoft makes it more customizable, and you can toggle it on or off. Also, the company is moving more Control Panel bits to the Settings app and adding a rather unexpected customization feature that will let you select where system indicators (flyouts and sliders) appear on the screen. Microsoft started rolling out a new update for the Snipping Tool app. The latest release lets you save screen recordings as GIFs. Shortly after that, we posted a guide with a bit more detail about the feature. Updates are available This section covers software, firmware, and other notable updates (released and coming soon) from Microsoft and third parties, delivering new features, security fixes, improvements, patches, and more. Microsoft is working on a Dashboard redesign for PowerToys. Developers published an early look at what is coming to the app in future updates, revealing a better-organized page with quick links, a shortcut overview, and a list of available modules. This week's Office updates are rather mixed. OneDrive, for one, is having problems finding files. Microsoft acknowledged the issue, which affects users on Windows, iOS, Android, and the web. Unfortunately, that is not the only negative story about OneDrive. A new report from a frustrated user revealed a scary tale of Microsoft locking them out of an account full of invaluable content. Outlook also has some issues, this time, with opening emails, and Microsoft 365 will soon disable outdated protocols for file access. Finally, Copilot in Excel received a major update for context awareness, which made the assistant more useful when answering questions about data. This week's browser updates include several releases. Firefox announced a new method for pinning and unpinning tabs. It is now available for testing in the Nightly channel. Microsoft Edge was updated with fixes for two security vulnerabilities (high severity) originating from Chromium. Finally, here is this week's Microsoft 365 Roadmap with an overview of all the new stuff that Microsoft added to the website. Here are other updates and releases you may find interesting: Microsoft 365 security in the spotlight after Washington Post hack. Microsoft expands European sovereign cloud offerings with new data and key controls. Microsoft Defender XDR received TITAN-powered Security Copilot recommendations. Microsoft reportedly plans more layoffs. Watchdog found Microsoft guilty of confusing advertising when it comes to Copilot. Here are the latest drivers and firmware updates released this week: AMD released a new chipset driver for Ryzen processors under version 7.06.02.123, which followed a security update for TPM-Pluton. Nvidia 576.80 WHQL with fixes for the RTX 5090 FE, new game support, and a long list of fixes. You can get some extra performance on certain AMD Ryzen chips with a simple system tweak. Surface Pro 11 and Surface Laptop 7 received big firmware updates with multiple fixes and improvements. Reviews are in Here is the hardware and software we reviewed this week This week, Steven Parker reviewed the TerraMaster D4 SSD, a palm-sized DAS with up to 32TB of storage that you can connect over USB4. This thing is rather impressive, and for a modest price tag, it delivers a tiny footprint, great looks, full RAID support in TOS 6, quick connection, and more. On the gaming side Learn about upcoming game releases, Xbox rumors, new hardware, software updates, freebies, deals, discounts, and more. AMD and Microsoft announced some big news this week. The two companies revealed a new multi-year partnership, which secures AMD as the future maker of chips for Xbox consoles and other hardware. Sarah Bond announced the partnership in a new video on the official Xbox media channels. Turn 10 Studios announced a new Forza Motorsport update. Update 21 brings IndyCar content, Career mode expansion, Featured Tours, new reward cars, and more. It is now available on Xbox and PC via the Microsoft Store and Steam. Minecraft is another Microsoft-owned game that received a big update this week. The long-anticipated graphics overhaul is finally here with directional lighting, volumetric fog, improved shadows, reflections, godrays, and a lot more. In addition, Mojang released Chase the Skies, the latest content drop, which adds happy ghasts, new music disks, a locator bar for players, environmental fog in the overworld, new background music, and all sorts of small gameplay changes. Microsoft announced new games for Game Pass. The latest additions include FBC: Firebreak, Crash Bandicoot 4: It's About Time, Start Trucker, Wildfrost, Rematch, Call of Duty: WWII, Rise of the Tomb Raider, and more. As usual, some games are leaving the subscription. Valve released a big update for the Steam overlay. The latest version introduced major upgrades to CPU and VRAM usage, temperatures, and other important metrics that you might want to track when playing games on your gaming rig. Deals and freebies Also, be sure to check out this week's Weekend PC Game Deals article, which features rhythm bundles, fishing festivals, DRM-free summer sales, and more. Other gaming news includes the following: Take-Two confirmed Borderlands 4 will not cost $80 for the base game. The Coalition expanded the Gears of War: Reloaded beta after its rocky start. Ara: History Untold 1.4 update delivered overhauls to AI, map generation, combat, and more. Star Citizen Alpha 4.2 update lands with radiation hazards, dynamic rain, and more. This link will take you to other issues of the Microsoft Weekly series. You can also support Neowin by registering a free member account or subscribing for extra member benefits, along with an ad-free tier option. Microsoft Weekly image background by steve_a_johnson on Pixabay
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      634
    2. 2
      ATLien_0
      230
    3. 3
      Michael Scrip
      218
    4. 4
      Xenon
      149
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!