Как установить позицию элемента к фиксированному внутри родительского контейнера

Я хотел бы установить положение элементов фиксированной так же, как на этом Google + пример, где кнопка фиксируется относительно браузера:Как установить позицию элемента к фиксированному внутри родительского контейнера

Но моя проблема здесь в том, что у меня есть несколько parent-container, и у каждого контейнера был элемент с классом to-top, который должен быть установлен фиксированным и относительно parent-container в нижнем правом углу.

Я хотел бы установить фиксированное ограничение to-top элемент на свой собственный parent-container только поэтому, когда пользователь прокручивает to-top перемещается только в пределах его parent-container

Вот моя скрипка, чтобы понять. Надеюсь, я хорошо объяснил. DEMO

источник

2016-10-25 Roel Delos Reyes

Что вы ищете липкое положение, где он остается неподвижным относительно но ограничивается границами его родителей. Этот вопрос был рассмотрен ранее в других вопросах. Существует также полиполк: https://github.com/filamentgroup/fixed-sticky – Terry

Спасибо за ваш ответ. Сэр, пожалуйста, подождите, когда я попробую ваши предложения. –

сэр ваш ответ довольно информативный и отличный1 –

Добавить Id в Div Как иclass="parent-container row3" id="row3". И добавьте ярлык Якоря href внутри id<a href="#row3">UP</a>

Это Call Parent Div Top при нажатии кнопки вверх. попробуйте этот

Live DemoHere

Snippet Пример Ниже

.wrapper 
 
{ 
 
    height: 500px; 
 
    overflow: auto; 
 
} 
 

 
.header 
 
{ 
 
    background: seagreen; 
 
    color: white; 
 
    padding: 5px; 
 
} 
 

 
.parent-container 
 
{ 
 
    height: 700px; 
 
    padding: 5px; 
 
} 
 

 
.parent-container > a 
 
{ 
 
    display: block; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    background: #eeeeee; 
 
} 
 

 
.row1 
 
{ 
 
    background: lightcyan; 
 
} 
 

 
.row2 
 
{ 
 
    background: lightblue; 
 
} 
 

 
.row3 
 
{ 
 
    background: lightgreen; 
 
} 
 

 
.to-top 
 
{ 
 
    position: relative; 
 
    top: 290px; 
 
    width: auto; 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="holder"> 
 
    <div class="parent-container row1" id="row1"> 
 
     <div class="header">Header 1</div> 
 
     <a href="#">Item 1</a> 
 
     <a href="#">Item 1</a> 
 
     <a href="#">Item 1</a> 
 
     
 
     <div class="to-top"><a href="#row1">UP</a></div> 
 
    </div> 
 
    <div class="parent-container row2" id="row2"> 
 
     <div class="header">Header 2</div> 
 
     <a href="#">Item 1</a> 
 
     
 
     <div class="to-top"><a href="#row2">UP</a></div> 
 
    </div> 
 
    <div class="parent-container row3" id="row3"> 
 
     <div class="header">Header 3</div> 
 
     <a href="#">Item 1</a> 
 
     <a href="#">Item 1</a> 
 
     
 
     <div class="to-top" ><a href="#row3">UP</a></div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-10-25 04:36:42

привет, сэр ответ, но это не то, что я пытаюсь сделать :) –

что вам нужно? PLZ кратко, то я помогу –

, но можете ли вы помочь мне с этим же ответом, не используя 'position: sticky'? вот оно и его удивительный http://stackoverflow.com/questions/40049285/how-to-prevent-get-over-other-divs –

Как установить позицию элемента к фиксированному внутри родительского контейнера

ответ

Смежные вопросы