Create an Absolutely positioned button in scrolling container (textarea) - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Create an Absolutely positioned button in scrolling container (textarea)

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">
* {<!--from www  .j a  v a  2s . c o m-->
   box-sizing:border-box;
}

.container {
   border:2px solid Chartreuse;
   height:257px;
   width:257px;
   overflow:auto;
   float:left;
   margin-right:17px;
}

.inner {
   position:relative;
   height:auto;
}

.full-height {
   position:absolute;
   top:0;
   left:0;
   right:129px;
   bottom:0;
   height:100%;
   background:blue;
}

.container-parent {
   position:relative;
   height:257px;
   width:257px;
}

.fab {
   position:absolute;
   bottom:21px;
   right:21px;
}
</style> 
 </head> 
 <body> 
  <div class="container-parent"> 
   <div class="container">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. 
   </div> 
   <button class="fab"> Ok </button> 
  </div>  
 </body>
</html>

Related Tutorials