Fixed positioning within a container's bounds using CSS

I am trying to achieve a text fade effect at the bottom of a div with content. To do this, I am using position: fixed; within a div that has overflow-y:scroll.

However, I am facing an issue where the div that is supposed to give the fade effect does not appear. I have attempted various solutions, but none of them seem to work within a div.

For reference, you can check out this jsFiddle example of the code.

Answer №1

If you're looking to achieve a specific layout, consider utilizing absolute positioning. Here is an example:

Check out this JS Fiddle link

.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);
}

Keep in mind that adding overflow: scroll to .content rather than .outer prevents the blur from scrolling.

If you opt for fixed positioning, the blur will stick to the bottom of the user's viewport instead of the element itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting jQuery html() Function Issue in Firefox: Dealing with an Unterminated

Trying to insert the following string into a <p> element: (without specified charset) Цена: 4,80 BGN Поддръжка: (directly from .XML file) &#1062;&#1077;&#1085;&#1072;: 4,80 BGN Encountering ...

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

I'm a bit uncertain about the best placement for my progress bar component during the API call

Trying to grasp material ui I managed to implement the progress bar. Struggling with loading it until my data is fully loaded. Uncertain about where to place my progress bar component. Could you guide me on how to resolve this issue during API calls, so I ...

Transferring HTML content using jQuery AJAX and PHP

Can anyone help me with displaying the content of a division on one page to another? <div id="box-cont" class="box-content"> <?php echo $stat;// Includes multiple images and s ...

There seems to be an issue in Angular as it is unable to retrieve /

I'm encountering an issue with my simple application where I am receiving the error message "Cannot GET /." Also, in the console, I see this error: TypeError: Cannot read property 'checked' of null at Object.SL_BBL_locer. I'm unsure ab ...

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

I am currently experiencing issues with my logo not aligning properly within the navigation bar

I am struggling with the whole concept of bootstraps. If there is anyone out there who can provide some guidance, I would greatly appreciate it. Unfortunately, my style sheet is unable to connect to this website. The appearance of my navigation bar curre ...

Ways to adjust the width of grid columns within an implicit row

I am curious about changing grid columns on an implicit row. While I won't provide the exact code that I'm working on, I will offer a brief example to clarify my question. <div class='container'> <p>item-1</p> <p& ...

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

What could be causing the misalignment of my select box in Bootstrap framework?

I'm currently trying to replicate the layout of the second image shown below, as seen in the first image. However, I'm facing an issue with the positioning of the selection box and I can't seem to figure out why. I've experimented wit ...

Issue with PHP incorrectly encoding JSON when writing to a file

I encountered a problem while working on this task. I used preg_split in PHP to create an array. However, my challenge now is converting it into JSON format. Despite trying several methods, the resulting code appears poorly written and does not seem to be ...

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

Swapping out the current div with the outcome from jQuery

I'm attempting to retrieve the most recent data for a div and replace it. The ajax query is fetching the entire HTML page, from which I am locating the right div. Now I want to update the current right div with the new content. $.ajax( { ...

What is the solution to the error message "cannot find specified file or directory, lstat 'scss/'"?

I am currently following a tutorial on YouTube here where the instructor is demonstrating how to run an npm script "sass" file using the terminal. When I try executing the command npm run sass, it gives me an error message: Error: ENOENT: no such file o ...

Using HTML video to fill entire div container

I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section. Here is th ...

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

I need to verify if the php code being executed is located within a div named "parent2". Currently, I am customizing a Joomla HTML override and attempting to place one module in two different positions. If the module is contained within parent2, then spe ...

Ways to incorporate a floating label

https://i.sstatic.net/vwnjl.jpg Can anyone provide guidance on how to incorporate the floating label as depicted in the image? ...