Липкий div внутри фиксированного положения div

Question

Необходимо разместить div, который должен быть липким при прокрутке родителя div, который расположен на fixed. Проверьте приведенный ниже фрагмент кода.

<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> 

Так вот, tag часть должна приклеиться к верхней части outer div.Here является fiddle

Есть ли какой-либо обходной путь для достижения этой цели с чистого CSS.

Answer 1

Попробуйте введение обертки DIV вокруг тега - таким образом, вы можете отделить логику позиционирования на обертке, и установите тег в position: fixed; для липкости. Обратите внимание, что position: fixed; сам по себе на теге вытащит его из своего нормального потока dom, поэтому вам нужно отрегулировать его позиционирование.

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

Answer 2

Единственный подход, который я вижу с помощью css, - это установить тег в фиксированное положение и просто присвоить его так же, как родительский div.

Как это:

.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>

Answer 3

Вот решение, он работал на хроме. Теперь, если это не удается в другом месте (возможно, из-за несоответствий с вложенным фиксированным позиционированием), он, несомненно, будет работать, если элемент тега не должен находиться внутри элемента фиксированной позиции и может находиться вне него.

.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/

Answer 4

Если вы хотите его в абсолютном положении, родитель не должен быть один скроллинг, потому что он будет следовать свиток (coordonate 0 остается наверху и поднимается по мере прокрутки).

Вы можете просто прокручивать внутренний 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>

Цель моего ответа, в основном, чтобы помочь вам понять, как это работает :) и что есть на самом деле ничего страшного в вашей начальный CSS, просто не было способа сделать это для ожидаемого поведения.

Answer 5

Вы можете переместить бирку за пределы фиксированного контейнера и зафиксировать ее в том же положении?