Locking text-stimuli on top of screen

Question

Hi,

I'm running a vignette experiment but have some troubles with the presentation of the text. The vignette is made up of a short text and then a bullet list, like this:

Please rate how likely you would be to buy a car with the following
attributes:
- Expensive
- White
- Automatic
- Four wheel drive
- No seat warmer
- Two doors
- Little storage space
- Electric

I do this by adding a text item with placeholders like this

<div style="margin: 0 auto 0; font-size: 120%">
    Please imagine a situation where a person with the following characteristics is about to become your %domain%. There are no right or wrong answers, we are just interested in your opinions. This person:   <br>
    <ul>
        <li> %first% </li>
        <li> %second% </li>
        <li> %third% </li>
        <li> %fourth% </li>
        <li> %fifth% </li>
        <li> %sixth% </li>
        <li> %seventh% </li>
    </ul>
    
</div>

I ask respondents to rate the vignette with slider question, and a scale question with four items. The questionnaire page therefore has 1. some php code 2. the text item 3. the slider question 4. the scale question

When viewing the page, it is possible to answer the slider with the stimuli still in view, but when you scroll down to the scales the stimuli is "scrolled out" and you see the slider on top instead. As vignettes are quite cognitively demanding on respondents I would like to limit the scrolling.

I tried adding

position: sticky; top: 40px;

to the text element to keep it always visible, but now the slider "scrolls through" the text so that the slider is visible behind the vignette text.

Any ideas on how to keep the text stimuli visible when viewing the scale question?

Answer 1

but now the slider "scrolls through" the text so that the slider is visible behind the vignette text.

That's easy: Give the text element a (white) background, so it's not transparent anymore.

<div style="margin: 0 auto; font-size: 120%; position: sticky; top: 40px; background-color: white;">

Eventually add some padding-bottom: 1em;, so that the background covers more space then just the text.

Comments

Thanks for the quick response!

It works well for the question text (headings?), however the slider and scales with their levels are still visible.

---

Using "z-index" and "position" allows you to modify the layer.

Start with adding  "position: relative;"

If that does not work, add "z-index: 150;"

---

Thank you that worked. My final solution with z-index was:

<div style="margin: 0 auto; font-size: 100%; position: sticky; top: 5px;
    background-color: white;z-index: 150;border: 2px solid black;
    padding: 10px 0 10px 20px; ">