---
url: /api/reference/wxt/utils/content-script-ui/types/interfaces/ContentScriptOverlayPositioningOptions.md
---

[API](../../../../../packages.md) / [wxt/utils/content-script-ui/types](../index.md) / ContentScriptOverlayPositioningOptions

# Interface: ContentScriptOverlayPositioningOptions

Source: [packages/wxt/src/utils/content-script-ui/types.ts:55](https://github.com/wxt-dev/wxt/blob/7594a4ca5cae24d0d5d705ed0d3ff1347b306e7b/packages/wxt/src/utils/content-script-ui/types.ts#L55)

## Contents

* [Properties](#properties)
  * [alignment?](#alignment)
  * [position](#position)
  * [zIndex?](#zindex)

## Properties

### alignment?

> `optional` **alignment?**: [`ContentScriptOverlayAlignment`](../type-aliases/ContentScriptOverlayAlignment.md)

Source: [packages/wxt/src/utils/content-script-ui/types.ts:72](https://github.com/wxt-dev/wxt/blob/7594a4ca5cae24d0d5d705ed0d3ff1347b306e7b/packages/wxt/src/utils/content-script-ui/types.ts#L72)

When using `position: "overlay"`, the mounted element is 0px by 0px in
size. Alignment specifies which corner is aligned with that 0x0 pixel
space.

[Visualization of alignment
options](https://wxt.dev/content-script-ui-alignment.png)

#### Default

```ts
'top-left'
```

***

### position

> **position**: `"overlay"`

Source: [packages/wxt/src/utils/content-script-ui/types.ts:56](https://github.com/wxt-dev/wxt/blob/7594a4ca5cae24d0d5d705ed0d3ff1347b306e7b/packages/wxt/src/utils/content-script-ui/types.ts#L56)

***

### zIndex?

> `optional` **zIndex?**: `number`

Source: [packages/wxt/src/utils/content-script-ui/types.ts:61](https://github.com/wxt-dev/wxt/blob/7594a4ca5cae24d0d5d705ed0d3ff1347b306e7b/packages/wxt/src/utils/content-script-ui/types.ts#L61)

The `z-index` used on the positioning element. Set to a positive number to
show your UI over website content.

***

Generated using [typedoc-plugin-markdown](https://www.npmjs.com/package/typedoc-plugin-markdown) and [TypeDoc](https://typedoc.org/)