How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code:

<div class="container">
<div class="scrollable-block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="absolute-div"></div>
</div>

Here is the CSS code:

.container {
    width: 200px;
    height: 300px;
    background: green;
}

.scrollable-block {
    width: 200px;
    max-height: 250px;
    overflow: scroll;
    position: relative;
}

.absolute-div {
    width: 20px;
    height: 20px;
    background: purple;
    position: absolute;
    top: 0;
    right: -10px;
}

Check out the live demo here: http://jsfiddle.net/BYTam/1/

The green div serves as the container with a fixed width. The yellow div is nested inside with a max-height and overflow-y: scroll. The goal is to position the purple div absolutely relative to the yellow div, but outside the green div to avoid a horizontal scrollbar in the yellow div. Is this achievable?

Thank you!

Answer №1

Unfortunately, your current markup does not support this action. The absolute-div will inevitably cause a horizontal scroll bar to appear due to its nesting within the scrollable-block. It appears that modern browsers do not permit the combination of overflow-x:visible and overflow-y:scroll.

Answer №2

In my experience, I have found a solution to prevent the absolute div from popping out of the scroll block. When faced with the same issue, here is the approach I took:

 <div class="absolute-div"></div> // remove it from its original location and place it within the main container.

 $(".absolute-div").css({"top":adjust this value+"px"}); 
// By using Jquery, you can update the "top" property of the ".absolute-div" element when scrolling within the "scrollable-block".

Answer №3

To eliminate the horizontal scrollbar, simply replace overflow:scroll with

overflow-y:scroll;
overflow-x:hidden;

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

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Overview This specific issue pertains to a potential freeze that occurs when scrolling through a <ul /> element that has been styled using CSS, specifically with the property -webkit-overflow-scrolling: touch on the Safari browser of iOS. Related Pr ...

Show various Bootstrap Alert Messages based on the type of error detected?

Trying to figure out how best to explain this, here it goes! I am working on a website and I want to incorporate alert messages. Check out some examples here. Depending on the form inputs, I need different alerts to be displayed. PHP will validate the in ...

Ways to turn off Bootstrap links hover background color?

I recently added a Bootstrap menu to my website that I'm currently working on. I am curious about how to disable the hover background color for Bootstrap links. Here's the situation: Below is an example of the menu I implemented: Currently, whe ...

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

How can I keep images from getting cut off when using slick slider with a fixed background?

My current design includes a stylized slick-slider that extends beyond the top border: However, I have set a fixed background for .slick-list, ensuring only the content (text, picture, and button) scrolls: How can I avoid the picture being cropped in t ...

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

Using the columns property in CSS3 along with background-color

My ul-element has multiple lis with a background color assigned to it. I am using the CSS3 columns property and everything is working well, but the background color of my ul is only visible in the first column. What could be causing this issue? Thank you ...

Using CSS to cut out a triangle shape from an image

Our designer has a vision for this: However, I'm struggling to find a suitable method for creating the triangle crop effect: Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape Creating a l ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Tips for adjusting website display height on mobile devices

My desktop website appears exactly as I want it to. When inspecting the site on the console to test responsiveness, everything seems fine. However, once I upload the changes to AWS and view the website on my phone, the vh and flexbox properties are not fun ...

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

Tips for concealing labels until the submit button is activated

I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

What distinguishes line-height:1.5 from line-height:150% in CSS?

Does anyone have any information on this? ...

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Can anyone tell me how to change the background color of the navbar when the navbar-collapse is displayed? I want one background color when the navbar-collapse is shown and a different color when it's collapsed. Is there a way to achieve this using C ...