---
title: Göreceli
description: Bir elemente bağlı olarak konumlanan kaplamalar.
---

## Özellikler

- **trigger**
  - **click** — Kaplama olan elementin dışında bir elemente sağ tıklayarak oluşturduğunuz kaplamayı seçip show veya hide aksiyonu bağlayabilirsiniz. Bağladığınız aksiyon tıklama durumuna göre otomatik olarak çalışır.
  - **hover** — Click ile aynı mantıkta çalışır; aksiyon fare üzerine geldiğinde tetiklenir.
  - **pageScroll** — Sayfa kaydırma durumunda tetiklenir. Seçildiğinde aşağıdaki özellikler açılır:
    - **scrollOffset** `number` — Kaplamanın tetikleneceği kaydırma konumunu yüzdelik cinsinden belirler.
    - **repeat** `boolean` — Kaplama görünürlüğünün tekrarlanıp tekrarlanmayacağını belirler.
  - **pageLoad** — Sayfa yüklendiğinde tetiklenir. Seçildiğinde aşağıdaki özellikler açılır:
    - **delay** `number` — Kaplamanın tetiklenmeden önceki bekleme süresini belirler. Saniye veya milisaniye olarak birim seçilebilir.
    - **repeat** `boolean` — Kaplama görünürlüğünün tekrarlanıp tekrarlanmayacağını belirler.
  - **manual** — Kaplamanın açılıp kapanması doğrudan kontrol edilir. Seçildiğinde aşağıdaki özellik açılır:
    - **condition** `boolean` — Dinamik bir boolean değer bağlanır ve kaplamanın görünürlüğü bu değere göre çalışır.
- **zIndex** `number` — Kaplamanın diğer elementlere göre katman sırasını belirler.
- **close** `auto`, `click` — Kaplamanın kapanma davranışını belirler. **auto** seçildiğinde fare kaplamanın üzerinden ayrıldığında kapanır, **click** seçildiğinde kaplama dışında bir yere tıklandığında kapanır.
- **collision** `auto`, `none` — Kaplamanın diğer elementlerle çakışma durumundaki davranışını belirler. **auto** seçildiğinde kaplama konumunu otomatik olarak ayarlar, **none** seçildiğinde çakışma kontrolü yapılmaz.
- **pageScroll** `auto`, `block` — Kaplama açıkken sayfa kaydırma davranışını belirler. **auto** seçildiğinde sayfa kaydırılabilir, **block** seçildiğinde sayfa kaydırması engellenir.

<img src="/media/ikas-studio/content-and-design/elements/attribute/ikas/overlay-relative.png" style={{ maxWidth: "400px", boxShadow: "0 4px 24px rgba(0, 0, 0, 0.08)" }} />

## Stiller

Elementin kendisine aşağıdaki stil gruplarından herhangi bir özellik uygulanabilir:

- [Flex Child](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/flex-child) veya [Grid Child](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/grid-child)
- [Düzen](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/layout)
- [Boyut](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/size)
- [Arka Plan](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/background)
- [Kenar](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/border)
- [Görünürlük](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/visibility)
- [Animasyon](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/animation)
- [Efektler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/effects)