Style with advanced CSS options

Apply advanced CSS like float, overflow, and z-index — or write custom CSS in the visual editor.

The visual editor supports several advanced CSS properties that give you more control over layout, stacking, and interactions. These options don’t require any coding and can help with custom positioning and accessibility tweaks. If you want to apply more complex styles or override attributes, you can add custom CSS to the Inline CSS and CSS class fields.

Position in the Changes panel

The Position section lets you control how elements are placed in relation to other content on the page. This includes whether elements stay in the normal document flow or break out of it entirely.

Position:

• Static — (default) elements appear in normal flow
• Relative — position relative to the element’s normal location
• Absolute — position relative to the nearest non-static ancestor
• Fixed — position relative to the browser window
• Sticky — hybrid of relative and fixed, based on scroll position

z-index — set stacking order. Higher values appear above lower ones.

Float — let elements float left or right so adjacent content flows around them

Clear — prevent elements from wrapping around floated content

Effects in the Changes panel

The Effects section lets you control how an element behaves visually — including how it handles overflow content, how the cursor appears when hovering, and how transparent the element is. These options help fine-tune interaction and presentation.

• Overflow — control what happens if content overflows its box (e.g., hidden, scroll)
• Cursor — change the mouse cursor when hovering over elements (e.g., pointer, grab, text)
• Opacity — how transparent or opaque an element is (e.g., 0% is fully transparent)

Advanced / CSS in the Changes panel

For editors with a little knowledge of CSS — or who are adventurous enough to learn — the Inline CSS and CSS class fields can be used to override attributes that Optimize doesn’t have a built-in control for in the interface.

CSS precedence:

• Inline CSS styling generally takes precedence over CSS class styling
• One exception is when a CSS class includes an !important tag for a particular property
• Visual editor changes (e.g., font size) are saved as inline CSS and merged with hand-coded inline CSS
• If there’s a conflict between visual editor changes and hand-coded changes, the visual editor changes take precedence