Widgets and CSS - position based on one another

[SNNoob]

Hello!

I have a page in Service Portal that shows information about a request to a user (this is a widget). To the right of the same page are two additional widgets, one widget with available actions and beneath it, widget that has a timeline.

I want to make these two widgets on the right to be floating, i.e. when I scroll down the page, they would stay visible on the right. I know that adding "position: "fixed" in the CSS of the widget would allow it to stay but if I add it to both, they appear on top of each other. I would need these two to stay in same position relative to each other while also floating in the page. If this was just one widget, this would be a piece of cake but I'm struggling on how to make this with two widgets so that they remain in correct positions.

Not all that familiar with CSS so any ideas would be very much appreciated.

[Pushkar-Snow · Accepted solution]

Hi @SNNoob ,

If the height of the first widget is not changing you can add that to the fixed position for second widget.

Suppose first widget height is 100px. You can write below CSS code for positioning:

.widget1 {
    position: fixed;
    background-color:red;
    color:#FFF;
    top: 0px;
    height:100px;
}

.widget2 {
  position: fixed;
    background-color: blue;
    top: 101px; // adding widget1 height to position this widget
}

If height for widget 1 is changing then you can only position second widget using javascript

Please ask if you face any problem. 

If I am able to help you with your question, Please click the Thumb Icon and mark as Correct. 

Regards,

Pushkar