Login | Register | FAQ

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


  • 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

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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" />
   <h1>Royal Flush</h1>

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

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

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

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

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


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


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

+ Post a reply

Page 1 of 1