CODEWITHSUNDEEP
htmlcss
Keith Power
Keith Power

Reputation: 14141

css position fixed inside div

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

Upvotes: 0

Views: 694

Answers (1)

Derek Story
Derek Story

Reputation: 9583

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.

Upvotes: 2

Related Questions