prevent an absolutely positioned element to affect the scrollbar - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

prevent an absolutely positioned element to affect the scrollbar

Demo Code

ResultView the demo in separate window 

<!--<!--from   ww w .  j a va  2s .  com-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>
.container {
   height:100px;
   width:301px;
   margin-top:51px;
   overflow-y:auto;
   border:2px solid Chartreuse;
}

.autosuggest {
   position:relative;
   width:251px;
}

.input {
   font-size:17px;
   width:231px;
   padding:6px 11px;
   border:0;
   background-color:yellow;
}

.suggestions {
   list-style-type:none;
   margin:0;
   padding:6px 11px;
   width:231px;
   background-color:blue;
   position:absolute;
}

.content {
   width:121px;
   padding:6px 11px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="autosuggest"> 
    <input class="input" type="text" value="input"> 
   </div> 
   <div class="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molest 
   </div> 
  </div> 
  <div class="container"> 
   <div class="autosuggest"> 
    <input class="input" type="text" value="input"> 
    <ul class="suggestions"> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
     <li>Lorem ipsum </li> 
    </ul> 
   </div> 
   <div class="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molest 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials