CODEWITHSUNDEEP
javascripthtmlcss
Rama Rao M
Rama Rao M

Reputation: 3051

Sticky div inside fixed positioned div

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.

Upvotes: 0

Views: 8687

Answers (5)

DabaloSe7eN
DabaloSe7eN

Reputation: 169

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

Upvotes: 1

Sam Anderson
Sam Anderson

Reputation: 300

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

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

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.

Upvotes: 0

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

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.net/ce14vcqL/4/

Upvotes: 1

Markiyan Harbych
Markiyan Harbych

Reputation: 189

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>

Upvotes: 4

Related Questions