CSS: Relative positioning and scrolling of child elements within a parent container

I am searching for a solution to scroll a panel located beneath a non-scrolling panel. Here is an example of what I am attempting to achieve:

http://jsfiddle.net/zh59w/

Essentially, the 'stay on top' element needs to remain at the top while allowing all the scrolling elements to scroll when necessary. I thought that by nesting the scrolling elements in a div (named nest) and positioning that nest relatively, I could then position the scrolling div absolutely. However, when I tried this, it seemed to disappear.

The closest workaround I have found so far is this:

http://jsfiddle.net/zh59w/1/

However, you'll notice that I had to set the following:

#scroll {
  top: 20px;
}

I would prefer to avoid this workaround because I do not know the exact size of the 'stay on top' element. Is there any alternative approach I can take (besides setting the 'stay on top' to fixed)?

cssscrollposition

Answer №1

Check out this CSS snippet for creating a fixed div that stays at the top of the page:

HTML:

<div id="stay-at-top">STAY AT TOP</div>
<p>SCROLL</p>

CSS:

#stay_at_top {
    position: fixed;
    top: 0;
    margin: 0;
    padding: 7px;
    width: 100%;
    background-color: gray;
}

View the code in action here: http://jsfiddle.net/example/abc123/

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

Python Ordering menu items for the Pelican restaurant

In response to jcollado's advice on this thread, I have set up my menu as per his instructions. However, I am facing difficulty adding the active CSS to the active item. DISPLAY_PAGES_ON_MENU = False DISPLAY_CATEGORIES_ON_MENU = False MENUITEMS = ( ( ...

pythonhtmlcsspelican

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

javascriptjqueryhtmlcss

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

htmlcss

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended. I am facing an issue where the code is not ...

htmlcss

Modifying the appearance of Bootstrap 4 Nav-tabs using CSS

I have implemented Bootstrap 4 Nav-tabs as shown below: <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" ...

cssbootstrap-4tabs

Adjustable div height: reduce until reaching a certain point and then begin expanding once more

Incorporating a hero section to display content is my current approach. The design adapts responsively utilizing the padding-bottom percentage strategy, along with an inner container that is absolutely positioned for central alignment of the content. The ...

javascriptjquerycssresponsive-design

Content not being displayed by Javascript

I'm having trouble displaying content using JavaScript DOM. Every time I try to run my code, the page comes up blank. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <title>Radiant HQ</titl ...

javascriptjqueryhtmlcssweb

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design

When a user clicks on a navigation link, the arrow pointer changes

I have successfully implemented a right arrow pointer on my navigation list. When clicking on these navigation links, they open a sub-navigation list. However, I am trying to make the arrow change to point downwards when the link is visited, but so far w ...

htmlcss

What is the best way to initiate a new animation from the current position?

Here is my custom box: <div class="customBox"></div> It features a unique animation: .customBox{ animation:right 5s; animation-fill-mode:forwards; padding:50px; width:0px; height:0px; display:block; background-color:bla ...

javascripthtmlcssanimation

Adjusting the background color using CSS according to the browser's dimensions

I'm having trouble identifying the issue with this code. The background color remains white and doesn't change as expected. <style type="text/css"> h1 { position: absolute; text-align: center; width: 100%; ...

htmlcssmedia-queriesbackground-color

Adjusting the font size results in a shift in the margin and padding

I am currently designing the homepage for my website. I want all the text to be aligned on the same line, but whenever I increase the font size of one element, it creates space around it, shifting it slightly to the right and pushing the text below down. ...

htmlcsspaddingfont-size

Can one determine whether an SCSS element is devoid of content?

Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...

csssassstyles

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

htmlcss

The variation in CSS output between Google Chrome on Windows and Ubuntu

My code includes a div tag: <a href="#"><div class="field btn half green" id="register-btn">Register</div></a> Here is the CSS code for the tag: .field { position: absolute; width: 205px; left: 22px; color: #eaeae ...

htmlcsswindowsgoogle-chromeubuntu

What is the best method for adjusting height in MaterialUI components?

Is there a way to remove this white line from the image?view image here When I set the height to 100%, it appears like this:view image here ...

cssreactjsmaterial-uiheight

Prolong the ultimate position of the initial animation for the translated object

I understand that this question has been asked multiple times before, but I am seeking a fresh approach to these animations. Issue: The second box contains multiple animations, and I am trying to achieve the same effect as the first one. However, it seem ...

csscss-animationscss-transforms

Overflow issues with CSS FlexBoxLayout

I am currently working on creating a website using Bootstrap and CSS's flexbox. My goal is to create a list that fits the height of the screen without overflowing it. After some trial and error, I managed to come up with a solution that looks like th ...

htmlcssbootstrap-4flexboxoverflow

The Move-class only applies to items within a transition-group that have not been removed if other items were removed

My item list is displayed in a flex-box, forming a matrix with several rows and items per row. I use the <transition-group class="move"> to apply a simple move transition to the <div v-for="item in items" :key="item.id"> move { transition: t ...

cssvue.jscss-transitions

Tips on styling HTML using a query value in string format

When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...

htmlcssasp.netsql-server-2008razor