css position fixed inside div - html

Question

I have a div with some content that I want the text fade effect at the bottom. In order to do that I have to use position: fixed; inside a div with overflow-y:scroll
The div that gives the fade effect does not appear. I have tried different solutions but none have worked inside a div.
Here is a jsFiddle example of the code

Answer 1

I would try using absolute positioning. Something like:
JS Fiddle
.outer {
height: 200px;
border: 2px solid black;
position: relative;
overflow: hidden;
}
.content {
height: 100%;
overflow: scroll;
}
.fadeout {
width: 100%;
height: 40px;
position: absolute;
display: block;
bottom: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
Note that I put overflow: scroll on .content instead of .outer to keep the blur from scrolling.
Using fixed positing will place the blur at the bottom of the user's viewport, rather than the element.