Login | Register | FAQ
Anonymous

Layer on layer with z-index (Layers)

+ Post a reply

2 posts Page 1 of 1


Layer on layer with z-index (Layers)

by CathiW » Fri Jun 07, 2013 8:43 pm

Is it possible to show the html codes for at least a couple of the cards? Thank you!
User avatar

CathiW

  • Posts: 3
  • Joined: Fri Apr 05, 2013 7:50 pm

Re: Layer on layer with z-index (Layers)

by XainPro » Thu Jul 25, 2013 12:18 pm

Here it is
HTML

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Example | CSS Tutorial | HTML.net</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
   <h1>Royal Flush</h1>

   <div id="ten_of_diamonds">
   <img src="diamonds_10.gif" alt="10 of diamonds">
   </div>

   <div id="jack_of_diamonds">
   <img src="diamonds_jack.gif" alt="Jack of diamonds">
   </div>

   <div id="queen_of_diamonds">
   <img src="diamonds_queen.gif" alt="Queen of diamonds">
   </div>

   <div id="king_of_diamonds">
   <img src="diamonds_king.gif" alt="King of diamonds">
   </div>

   <div id="ace_of_diamonds">
   <img src="diamonds_ace.gif" alt="Ace of diamonds">
   </div>   
   </body>
</html>


Style.CSS

Code: Select all
#ten_of_diamonds {
   position: absolute;
   left: 100px;
   top: 100px;
   z-index: 1;
}
#jack_of_diamonds {
   position: absolute;
   left: 115px;
   top: 115px;
   z-index: 2;
}
#queen_of_diamonds {
   position: absolute;
   left: 130px;
   top: 130px;
   z-index: 3;
}
#king_of_diamonds {
   position: absolute;
   left: 145px;
   top: 145px;
   z-index: 4;
}
#ace_of_diamonds {
   position: absolute;
   left: 160px;
   top: 160px;
   z-index: 5;
}
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1