Need to place a div which should be sticky on scrolling of parent div which is positioned to fixed. Please check the below code snippet.

<style>
   .outer{
     width:300px;
     height:400px;
     border:1px solid red;
     overflow:auto;
     position:fixed;
     top:50px;
     left:100px;
   }
   .tag{
    position:absolute;
    top:0px;
    left:80px;
    background:#ffcc33;
    border:2px solid #dfa800;
    border-top:0px;
    padding:3px 5px;
   }
   .inner{
     height:800px;
     border:1px solid green;
     margin:0px 5px;
   }
 </style>

 <div  class="outer"> <!-- This is scroll-able-->
   <div class="tag">Click here to Refresh</div><!-- This should be sticky-->
   <div class="inner"><!--This content causes scrolling-->
      Inner content...........
   </div>
 </div> 

So here, tag part should be stuck to top of the outer div.Here is the fiddle

Is there any workaround to achieve this with pure css.

Need to place a div which should be sticky on scrolling of parent div which is positioned to fixed. Please check the below code snippet.

<style>
   .outer{
     width:300px;
     height:400px;
     border:1px solid red;
     overflow:auto;
     position:fixed;
     top:50px;
     left:100px;
   }
   .tag{
    position:absolute;
    top:0px;
    left:80px;
    background:#ffcc33;
    border:2px solid #dfa800;
    border-top:0px;
    padding:3px 5px;
   }
   .inner{
     height:800px;
     border:1px solid green;
     margin:0px 5px;
   }
 </style>

 <div  class="outer"> <!-- This is scroll-able-->
   <div class="tag">Click here to Refresh</div><!-- This should be sticky-->
   <div class="inner"><!--This content causes scrolling-->
      Inner content...........
   </div>
 </div> 

So here, tag part should be stuck to top of the outer div.Here is the fiddle

Is there any workaround to achieve this with pure css.

• javascript
• html
• css

• did you tried using position:fixed on .tag? – Sagar Kodte Commented Jun 15, 2016 at 13:11
• Could you, please, mark the answer as correct, if it realy is? – Markiyan Harbych Commented Jun 17, 2016 at 19:14
• @sagarkodte Yes, But I have to keep fixed top to the inner div as well which I didn't like. – Rama Rao M Commented Jun 19, 2016 at 4:20

5 Answers 5

The only approach I see with the css is to put the tag to position fixed and just allign it the same as the parent div.

Like this:

.outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     overflow: auto;
     position: fixed;
     top: 50px;
     left: 100px;
   }
   
   .tag {
     position: fixed;
     top: 50px;
     left: 180px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }
   
   .inner {
     height: 800px;
     border: 1px solid green;
     margin: 0px 5px;
   }

<div class="outer">
  <div class="tag">Click here to Refresh</div>
  <div class="inner">
    Inner content...........
  </div>
</div>

Try introducing a wrapper div around the tag - this way you can separate the positioning logic on the wrapper, and set the tag to position: fixed; for stickiness. Note that position: fixed; by itself on the tag will pull it out of its normal dom flow, so you need to adjust its positioning.

HTML

<div class="tag-wrapper">
    <div class="tag">Click here to Refresh</div>
</div>

CSS

.tag-wrapper {
    position: absolute;
    top: 0px;
    left: 80px;
}

.tag {
    position: fixed;
    background: #ffcc33;
    border: 2px solid #dfa800;
    border-top: 0px;
    padding: 3px 5px;
}

click to see fiddle

Here is a solution, It worked on chrome. Now in case this fails elsewhere (maybe due to inconsistencies with nested fixed positioning), it will surely work if the tag element does not have to be inside the fixed position element, and can be outside it.

   .outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     overflow: auto;
     position: fixed;
     top: 50px;
     left: 100px;
   }

   .tag {
     position: fixed;
     top: 50px;
     left: 180px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }

https://jsfiddle/ce14vcqL/4/

If you want it in absolute position, parent should not be the one scrolling, because it will follow the scroll (coordonate 0 remains at top and goes up as the scroll does).

You may just scroll the inner div :

   .outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     position: fixed;
     top: 50px;
     left: 100px;
   }
   
   .tag {
     position: absolute;
     top: 0px;
     left: 80px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }
   
   .inner {
     overflow: auto;
     height: 100%;
     border: 1px solid green;
     margin: 0px 5px;
   }

<div class="outer">
  <div class="tag">Click here to Refresh</div>
  <div class="inner">
    Inner content...........
    <br/><!-- content needed to show the scroll bar -->
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    end
  </div>
</div>

Purpose of my answer is mainly to help you understand how it works :) and that there is in fact no trouble on your initial CSS, just was not the way to do it for the behavior expected.

You could move the tag outside of the fixed container and fix it at the same position?