# How can I make fixed position cells such as a tool bar or input form?

**URL:** <https://talk.observablehq.com/t/how-can-i-make-fixed-position-cells-such-as-a-tool-bar-or-input-form/2171>\
**Category:** Help\
**Created:** [July 17, 2019, 3:10pm UTC](https://talk.observablehq.com/t/how-can-i-make-fixed-position-cells-such-as-a-tool-bar-or-input-form/2171 "2019-07-17T15:10:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![david-hall](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/david-hall/32/848_2.png) [@david-hall](https://talk.observablehq.com/u/david-hall)\
**Post date:** [July 17, 2019, 3:10pm UTC](https://talk.observablehq.com/t/how-can-i-make-fixed-position-cells-such-as-a-tool-bar-or-input-form/2171/1 "2019-07-17T15:10:05Z")

</div>

How can various input cells such as sliders and checkboxes be visually combined in a “toolbar” cell at a fixed position (such as near the top, just below the title), and then make that cell and perhaps the title cell remain in view while the rest of the notebook scrolls vertically below them?

I’m a relative newbie at Observable. I have started working on it at [https://observablehq.com/@david-hall/toolbar-question](https://observablehq.com/@david-hall/toolbar-question), but I’m not sure if I’m even on the right track by using CSS. That notebook also mentions some other approaches that I have considered.

Interrestingly, as I add this question to the forum, it’s in a dialog that behaves similar to what I want. It is positioned at the bottom of the page and other recent postings all scroll behind the input form.

Any suggestions or examples of how to implement such a tool bar?  
Thanks.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [July 17, 2019, 3:39pm UTC](https://talk.observablehq.com/t/how-can-i-make-fixed-position-cells-such-as-a-tool-bar-or-input-form/2171/2 "2019-07-17T15:39:11Z")

</div>

Sadly, you can’t do so on the main [observablehq.com](http://observablehq.com) site (and this is intentional):

> [@Sticky div and Top button integration to notebook](https://talk.observablehq.com/t/sticky-div-and-top-button-integration-to-notebook/1079/2):
>
> This isn’t currently possible, sorry. Notebook content is not allowed to overlay system content; this makes it harder for user-generated notebook content to masquerade as part of the system user interface. It might be possible to support this in some limited way in the future (say by having a special sticky cell), but we don’t have any current plans to support it. You can using position-sticky and position-fixed elements when you [embed your notebook on your own site](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks), where you control how your …

The best you can do is set this up to work when you embed your notebook on another site.

---

<div class="post-metadata">

**Author:** ![david-hall](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/david-hall/32/848_2.png) [@david-hall](https://talk.observablehq.com/u/david-hall)\
**Post date:** [July 20, 2019, 3:13am UTC](https://talk.observablehq.com/t/how-can-i-make-fixed-position-cells-such-as-a-tool-bar-or-input-form/2171/3 "2019-07-20T03:13:27Z")

</div>

Thanks for the quick response. Having to host my final document on another site just so I can control the layout of cells in an Observable notebook initially seemed like overkill to me, but now I can understand the security issues with user content masquerading as system content. Looks like embedding my notebook on another site is my best bet. The tutorial at [https://observablehq.com/@observablehq/downloading-and-embedding-notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) makes it seem prety simple. I’ll give it a shot. Thanks again.
