Absolute position and overflow hidden in CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Absolute position and overflow hidden in CSS

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.wrap{<!-- w w  w.j  a  v a 2  s.c o  m-->
   width: 500px;
   margin: 50px auto;
   border: 1px solid green;
   overflow: hidden;
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}
span{
    position: absolute;
    background:red;
    margin-left:-50px;
}

      </style> 
   </head> 
   <body> 
      <div class="wrap"> 
         <div class="box"> 
            <span>Left</span> 
            <div class="main"></div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials