Overlapping of html and css based boxes - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Box

Description

Overlapping of html and css based boxes

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.signin ul li {
   list-style:none;
   position:absolute;
}

.b {<!-- ww w .  j  av a  2  s.c o m-->
   left:151px;
}

.a {
   left:121px;
   top:11px;
   z-index:100;
}

.signin {
   float:left;
   width:auto;
   position:absolute;
   margin-top:-27px;
}

.signin   li ,ul {
   list-style:none;
}

.signin li a h6 {
   padding:0px 31px;
   text-align:center;
   background:Chartreuse;
   font-size:0.10em;
   border-radius:3em 0 0 3em;
   color:yellow;
}

.signin li a:hover {
   color:blue;
}

.signin li.a   h6 {
   padding:6px 16px;
   text-align:center;
   font-size:0.10em;
   background:pink;
   border-radius:3em;
   color:OrangeRed;
}

.signin li.b a h6 {
   padding:0px 31px;
   text-align:center;
   font-size:0.10em;
   background:grey;
   border-radius:0 3em 3em 0;
   color:BlueViolet;
   z-index:2;
}

.signin li b :hover {
   color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div class="signin"> 
   <ul> 
    <li> <a href="#loginmodal" id="modaltrigger"> <h6>Lorem </h6> </a> </li> 
    <li class="a"> <h6>Lo</h6> </li> 
    <li class="b"> <a href="signup.html"> <h6>Lorem </h6> </a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials