Сделать внутренний div фиксированным, используя только css

Я пытаюсь сделать внутренний div фиксированным относительно его parrent div. Я сделал пример моего кода на jsfiddle. Проблема в том, что вы прокручиваете div. Он больше не находится на этом месте. Мой HTML выглядит следующим образом:Сделать внутренний div фиксированным, используя только css

<div class="outer"> 
    <div class="inner1"> 
    Lorem ipsum dolor 
    </div> 
    <div class="inner2"> 

    </div> 

</div>

и CSS

.outer{ 
    position: relative; 
    width: 400px; 
    height: 300px; 
    border: 1px solid black; 
    overflow: auto; 
} 

.inner1{ 
    position: absolute; 
    width:50px; 
    height: auto; 
    border: 1px solid blue; 
    top: 10px; 
    right: 10px; 
} 
.inner2{ 
    width: 500px; 
    height: 500px; 
}

Есть ли способ сделать inner1 неподвижные относительно outer только с помощью CSS?

источник

2016-05-07 TomP

_ "Спецификация CSS требует, чтобы' позиция:. Fixed' привязываться к 'viewport', не содержащего позиционируемый элемент" _ см [это] (HTTP : //stackoverflow.com/a/7823145/1746830) answer .. – Rayon

исправлено не относительно родителя! Он всегда остается на данной позиции! –

Я знаю, что это не так! Я просто хочу, чтобы inner1 оставался на своем месте, даже когда u прокручивал ... Я знаю, что одно из решений - вычисление смещения в JS и использование позиции: исправлено .. Но мой вопрос: если вы можете это сделать, используя только css – TomP

попробовать это ...

<style> 
.outer{ 
    position: relative; 
    width: 400px; 
    height: 300px; 
    border: 1px solid black; 
    overflow: auto; 
} 

.inner1{ 
    position: fixed; 
    width:50px; 
    height: auto; 
    border: 1px solid blue; 

} 
.inner2{ 
    width: 500px; 
    height: 500px; 
} 
</style>

источник

2016-05-07 10:14:57

Вы можете попробовать это:

.inner1 { 
     position: fixed; 
     width: 50px; 
     height: auto; 
     border: 1px solid blue; 
     top: 10px; 
     right: calc(100% - 400px); // 400px is the outer div's width 
    }

источник

2016-05-07 10:16:24 Pranab

Здесь работает JSfiddle

<div class="container"> 
<div class="header">title</div> 
<div class="cont_elements"> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
</div>

и CSS будет

.header { 
    position: absolute; 
    top:0; 
    /* scrolling out of view :-(*/ 
    z-index:2; 
    background-color:pink; 
} 
.container { 
    position:relative; 
    width:200px; 
    height:400px; 
    background:gold; 
} 
.cont_elements {overflow-y:scroll; height:100%;} 
.element { 
    position: relative; 
}

источник

2016-05-07 10:42:07

Просто измените .inner1

.inner1{ 
    position: fixed; 
    width:50px; 
    height: auto; 
    border: 1px solid blue; 
    margin-top: 10px; 
    left: 330px; 
}

источник

2016-05-07 10:54:19 Sadegh

Сделать внутренний div фиксированным, используя только css

ответ

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