All geek questions in one place

Z index property not applicable

I use the following html code and css code to design my landing page.

HTML

<!DOCTYPE html> <html> <head runat="server"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body style="background:transparent;"> <div id="divContainer"></div> <form id="form1" runat="server"> <div id="topDiv"></div> <div id="divMain"> <aside><div id="logo"> <img id="imgLogo" src="Images/minerva.jpg" /> </div></aside> <aside> <div id="divContact"></div> </aside> </div> <footer> </footer> </form> </body> </html>

CSS

 #topDiv { box-shadow: 0px 10px 20px #888888; background-color: #113871; width: 100%; height: 40px; } #logo { } #imgLogo { width: 400px; height: 200px; margin-top: 20px; float: left; } #divContact { width: 300px; height: 400px; background-color: White; opacity: 0.5em; float: right; z-index: 9999; margin-right: 50px; margin-top: 149px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 .5em .25em Gray; } footer { width: 100%; height: 150px; background-color: #113871; display: block; float: left; margin-top: -100px; z-index: -1; }

I gave an index value of z 9999 for #divContact and -1 for the footer tag. My problem is that I do not understand what I want, that is, to bring divContact to the front. Can someone take a look.

+4
source share
3 answers

z-index only works with positioned elements:

 /* This does not work */ .foo { z-index: 10; } /* This works */ .bar { position: relative; z-index: 10; }

Source: http://www.w3.org/TR/CSS2/visuren.html#z-index

+14
source

z-index will only work with an element whose position property is explicitly set as absolute, fixed or relative.

+11
source

As I know, z-index only works with elements with css position attribute. So I tried in the browser inspector to set position:relative; in divContact and now it is in the first plane.

+4
source

Source: https://habr.com/ru/post/1415006/

More articles:


All Articles