• 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

    • Look at the fingers especially round the cups, you’d think A needs to add the I together
    • There are too many people doing nothing and just cruising at MS because of how the previous culture was (rest and vest).
    • AMD Ryzen AM4 16-core 5900XT processor has never been priced cheaper by Sayan Sen While AMD's newest processor platform with DDR5 and PCIe 5.0 goodness is AM5, the preceding Socket AM4 continues to be a great option for gamers shopping on a lower budget. One of the most powerful AM4 desktop chips, the 16-core Ryzen 9 5900XT, is currently priced at the lowest ever at just $230 (purchase links down below). The Ryzen 7 5900XT is based on the Zen 3 architecture supports DDR4, PCIe Gen4, and offers very good performance in both gaming and productivity. While users may not expect the same level of gaming throughput or latency improvement as the 5800X3D, it is certainly possible that titles that utilize more than 16 threads will favor the 5900XT over the 5800X3D. And the 5900XT has plenty of L3 cache as well at 64 MB. So while not 3D stacked V-cache, it should still be a decent gaming chip. And all that cache as well as cores/threads will be excellent for non-gaming tasks of course. The CPU has a base clock of 3.3 GHz and boosts up to 4.8. It has a TDP of 105 watts so the available power envelope certainly helps with that. It can tolerate temperatures of up to 90 °C and there is no boxed cooler with it. So you need an aftermarket one, ideally a 280 mm or 360 mm AIO liquid cooler or an excellent air cooler. Also since this is a 16-core 105-watt chip, make sure to run it on an AM4 board that has good quality VRM and cooling with lots of power (ideally an X570 motherboard). Another consideration is that it does not have integrated graphics so you need a separate dedicated GPU for display out. Get the AMD Ryzen 9 5900XT at the links below: AMD Ryzen 9 5900XT - No Integrated Graphics Desktop CPU Processor - 100-100001581WOF: $229.99 (Amazon US) || : $279.00 (Newegg US + Corsair 32GB DDR4-3200 RAM) This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • OnlyOffice 9.0.0 by Razvan Serea OnlyOffice Desktop Editors is an open-source office suite distributed under AGPL v.3 that combines text, spreadsheet and presentation editors allowing to create, view and edit documents stored on your computer. The application does not require constant connection to the Internet and allows youto create, edit, save and export text, spreadsheet and presentation documents. It is fully compatible with Office Open XML formats: .docx, .xlsx, .pptx. One pack - five editors - multiple features Create, view and edit text documents, spreadsheets and presentations of any size and complexity. Work on documents of most popular formats: DOCX, ODT, XLSX, PDF, ODS, CSV, PPTX, ODP, etc. Deal with multiple files within one and the same window thanks to the tab-based user interface. Highest compatibility with Microsoft Office formats. Real-time collaboration within your favorite cloud Connect ONLYOFFICE Desktop Editors to the cloud platform of your choice: ONLYOFFICE, Nextcloud or ownCloud to collaborate on documents with your team – co-edit in real time, review, comment and interact using chat. Extending your editing capabilities Take the most of your editing with the collection of third-party plugins. Insert a YouTube video, add special symbols or a ClipArt object, automatically translate any word or sentence, highlight code, etc. Do even more! Create your own plugin using the API documentation and ready-to-use examples available on GitHub. OnlyOffice key features: View, edit, and collaborate on docs, sheets, slides Build fillable PDF forms and fill them in online Read and edit PDFs, export/import to/from PDF Convert docs to Markdown and HTML Turn your textbooks into e-books Generate texts with the AI helper OnlyOffice 9.0 changelog: New features All Editors Redesigned interface of the main application window Added new interface themes: Modern Light and Modern Dark Added saving of the last selected languages in spellcheck lists Added Arabic spellcheck dictionary used in sixteen dialects Added AI-powered macro generation from descriptions and VBA-to-JavaScript conversion Added the interface translation into Urdu (ur-PK, Urdu (Pakistan)) Added support for TextArt text settings inside chart labels Added support for drawing the Up/Down Bars chart elements Merged local and cloud template lists into a unified view The list of templates is now processed on the client side, not on the server The installed system languages are now displayed at the top of the text/document/dictionary list Added a contrast-reducing effect for control buttons in inactive windows Added the option to select a printer in the print preview menu The Print using the system dialog option has been added to the print preview menu The ability to configure format associations for modern Windows OS in the EXE package installation wizard has been unlocked Document Editor Added correct display of previews for paragraph numbers for RTL Improved positioning and settings of TextArt for RTL Improved drawing of borders and fill for paragraphs with RTL direction Enabled accurate cursor navigation with arrow keys based on the paragraph's text direction Added the ability to display numbers using Hindi digits Added a setting in the File menu for selecting the preferred font size: Western/Chinese for the Chinese interface language (Chinese (Simplified)) Added a Borders button to the Home toolbar to quickly set paragraph settings Added support for the MD format for reading Spreadsheet Editor Added support for displaying bidirectional text Added the ability to select external data from another spreadsheet Presentation Editor Added the ability to set the paragraph direction (Text Direction > RTL) on the toolbar and in the advanced settings Added the ability to view animations with text Added the "Preserve" option to the Slide Master context menu Forms Changed the appearance of the Signature and Image fields: the placeholder and signature icon are now always displayed Improved user experience when filling in the Signature and Image fields Added a new "type": "signature" for the Signature field, used in the process of filling out forms PDF Editor Added the ability to set RTL direction for text The Edit Text option is available in the Community Edition build Implemented a PDF form editor Added copying pages between PDF files Diagrams Release of the first version of the Diagram Viewer with the ability to open VSDX files for viewing Convert Added conversion of the XLSB format to the editor's internal format, allowing editing and saving in XLSX without preliminary conversion Download: OnlyOffice 64-bit | 273.0 MB (Open Source) Download: OnlyOffice 32-bit | 252.0 MB Download: Windows XP 64-bit | 467.0 MB Download: Windows XP 32-bit | 457.0 MB View: OnlyOffice Website | Screenshot | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      684
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      206
    4. 4
      +FloatingFatMan
      171
    5. 5
      Steven P.
      145
  • Tell a friend

    Love Neowin? Tell a friend!