Properti offset-position CSS

Halaman sebelumnya offset-path
Halaman berikutnya offset-rotate

Definisi dan penggunaan

offset-position properti menentukan posisi awal elemen di jalur.

Jika offset-path Jika fungsi belum menentukan posisi awalnya sendiri, maka offset-position nilai menentukan posisi awal elemen saat bergerak sepanjang jalur penurunan.

Contoh

Contoh 1

Posisi awal elemen yang ditentukan harus berada di pojok kanan bawah:

#square {
  width: 60px;
  height: 60px;
  background: biru;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Coba sendiri

Contoh 2

Lihat berbagai posisi awal penurunan:

#square1 {
  width: 40px;
  height: 40px;
  background: merah muda;
  text-align: center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: merah;
  text-align: center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: kuning;
  text-align: center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: biru-tua;
  text-align: center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavander;
  text-align: center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Coba sendiri

Syntaks CSS

offset-position: auto|normal|position|initial|inherit;

Nilai atribut

Nilai	Deskripsi
normal	Atur posisi awal penurunan ke 50% 50% blok yang mengandung. Nilai default.
auto	Atur posisi awal penurunan ke ujung kiri atas kotak elemen.
position	Tentukan koordinat x/y, tempatkan elemen di sebelah luar kotaknya. Dapat digunakan 1 hingga 4 nilai untuk menentukan posisi.
initial	Atur atribut ini ke nilai default. Lihat: initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default:	normal
Inheritance:	Tidak
Produksi animasi:	Dukung. Lihat:Atribut berhubungan dengan animasi.
Versi:	CSS3
Syntaks JavaScript:	object.style.offsetPosition="auto"