The scroll bar disappears behind the div

Question

The scroll bar disappears behind the div

Hello,

I am looking to create an HTML layout similar to the one shown below:

+----------------------+-----+
|       upSide         |     |
|----------------------|     |
|                      |right|
|                      |side |
|                      |     |
|      mainSide        |     |
|                      |     |
|                      |     |
+----------------------+-----+

Something along these lines:

<div id="rightSide"></div>
<div id="mainFrame">
    <div id="upside"></div>
    <div id="mainSide"></div>
</div>

Essentially, I want #upSide to overlap #mainSide. In other words, when scrolling within #mainFrame, the elements in #mainSide should be visible behind #upSide with a transparent background (e.g. background-color:rgba(0,0,0,0.35)).

The issue arises when I apply the following styles:

#upSide{
    position:fixed;
    width: 80%;
}
#rightSide{
    width:20%;
    float:right;
    position:relative;
}
#mainFrame{
    height:100%;
    overflow:auto;
}

Everything works as expected, except for the fact that the scrollbar within #mainFrame appears behind #upSide. Do you have any suggestions on how to resolve this?

html css layout css-float

Answer 1

Answer №1

The issue with the scroll bar going behind #upSide is due to the position:fixed property that was added.

To resolve this, you can make use of the following code:

<html>
<head>
    <style>
    #upSide{
        height:200px;
        width: 80%;
        background:blue;
    }
    #mainSide{
        height:800px;
        width: 80%;
        background:green;
    }
    #rightSide{
        width:20%;
        height:800px;
        float:right;
        position:relative;
        background:red;
    }
    #mainFrame{
        height:800px;
        width: 80%;
        overflow:auto;
        background:yellow;
    }
    </style>
</head>
<body>
    <div id="rightSide"></div>
    <div id="mainFrame">
        <div id="upside"></div>
        <div id="mainSide"></div>
    </div>

</body>

By making these adjustments, the scroll bar should now function correctly without appearing behind other elements on the page.

Answer 2

The issue with the scroll bar going behind #upSide is due to the position:fixed property that was added.

To resolve this, you can make use of the following code:

<html>
<head>
    <style>
    #upSide{
        height:200px;
        width: 80%;
        background:blue;
    }
    #mainSide{
        height:800px;
        width: 80%;
        background:green;
    }
    #rightSide{
        width:20%;
        height:800px;
        float:right;
        position:relative;
        background:red;
    }
    #mainFrame{
        height:800px;
        width: 80%;
        overflow:auto;
        background:yellow;
    }
    </style>
</head>
<body>
    <div id="rightSide"></div>
    <div id="mainFrame">
        <div id="upside"></div>
        <div id="mainSide"></div>
    </div>

</body>

By making these adjustments, the scroll bar should now function correctly without appearing behind other elements on the page.

The scroll bar disappears behind the div

Answer №1

Similar questions

What significance do the blank quotes hold in terms of value?

Guide on displaying Adsense ads specifically for mobile devices

The navigation bar's background color remains static and doesn't update as

using a CSS tag to vertically center text within an element

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

Modifying a Sass variable using a Knockout binding or alternative method

Resize lowercase letters to fit the box model

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

The HTML.LabelFor function is failing to display correctly

Modify the appearance of the post-content's color and background when hovering

Utilizing an array of font styles in a single line while maintaining a consistent width

Is a non-traditional fading effect possible with scrolling?

The Gulp task is failing to generate the CSS file

What is the best way to place an icon in the center of a Bootstrap 5 card image?

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

Do matrix filters in IE7 take into account white space sensitivity?

HTML/CSS Inactive: Troubleshooting and Solutions

Include an iframe with hidden overflow specifically for Safari browsers

Tips for Importing HTML Table Data Line by Line into SQL Table

What is the best way to prevent URL modification in Angular?