I got a sidebar now, but I dont want it to stay in the same position when the user scrolls (HTML, CSS)

Question

I think the title explains this well. Basically the sidebar sticks in one position. I like where it is but I don't want it to be fixed. When I remove position: fixed; it just stacks on top of the content.

HTML

<div class="sideBarLeft">
...
</div>
<div class="content">
...
</div>

CSS

div.content {
    background-color: rgba(0, 0, 0, 0.500);
    padding-left: 250px;
    padding-right: 250px;
    margin-left: 250px;
    margin-right: 250px;
}
div.leftSideBar {
    width: 160px;
    position: fixed;
    z-index: 2;
    top: 1;
    left: 0;
    background-color: rgba(0, 0, 0, 0.500);
    overflow-x: hidden;
    margin-left: 5px;
    margin-top: 5px;
    text-align: left;
    padding-left: 5px;
}

That worked. Please post that as an answer so I can mark this as answered. — UCYT5040, Nov 19 '20 at 21:47

score 1 · Accepted Answer · answered Nov 19 '20 at 21:51

1

position:absolute will use the same left/top position, except it will not be stuck in place.

answered Nov 19 '20 at 21:51

imvain2

15,480
1
16
21

Will this work on the right too? What would I need to change for it to be in the right? – UCYT5040 Nov 19 '20 at 22:07
@UCYT5040 change `left:0` to `right:0` – imvain2 Nov 19 '20 at 22:08
The right sidebar appears below the left sidebar. How can I position them on the same level? – UCYT5040 Nov 20 '20 at 14:55

I got a sidebar now, but I dont want it to stay in the same position when the user scrolls (HTML, CSS)

1 Answers1