Absolute positioning div inside relative positioned div - 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 positioning div inside relative positioned div

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.ui-icon {<!--from www.  ja v a2 s. c o  m-->
   background-color: red;
   width: 20px;
   height: 20px;
}
#container {
   position: relative;
}
.ui-resizable {
   overflow: auto;
}
ul, li {
   list-style: none outside none;
}
.ui-resizable-se {
   bottom: 1px;
   cursor: se-resize;
   height: 12px;
   right: 1px;
   width: 12px;
   position: absolute;
   right:20px;
}

      </style> 
   </head> 
   <body> 
      <div id="container"> 
         <ul id="unlNotification" class="ui-resizable" style="height: 127.7px;"> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <li>main.cpp</li> 
            <div class="ui-resizable-se ui-icon" style="z-index: 90;"></div> 
         </ul> 
      </div>  
   </body>
</html>

Related Tutorials