Bolehkah Anda Gunakan `kedudukan: mutlak` Tanpa Menetapkan `atas`, `kiri`, `bawah` atau `kanan`?

Mary-Kate Olsen
Lepaskan: 2024-11-07 09:18:03
asal
532 orang telah melayarinya

Can You Use `position: absolute` Without Setting `top`, `left`, `bottom`, or `right`?

Kedudukan: Mutlak Tanpa Menetapkan Atas/Kiri/Bawah/Kanan?

Dalam CSS, kedudukan: sifat mutlak membenarkan anda mengalih keluar elemen daripada aliran dokumen biasa , menjadikannya diposisikan secara mutlak berbanding bekasnya. Walau bagaimanapun, kadangkala anda mungkin mahu menggunakan kedudukan: mutlak tanpa menetapkan nilai eksplisit untuk sifat atas, kiri, bawah atau kanan.

Kes #1:

Satu senario di mana pendekatan ini boleh berguna ialah apabila anda ingin meletakkan elemen relatif kepada elemen lain dalam bekas yang sama. Sebagai contoh, anda mungkin mahu meletakkan logo di atas foto dalam pengepala, seperti yang ditunjukkan dalam contoh HTML dan CSS di bawah:

<a>
Salin selepas log masuk
#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent; */
}
Salin selepas log masuk

Dalam contoh ini, menetapkan kedudukan: mutlak tanpa menyatakan nilai tertinggi meletakkan logo 10px di atas foto, menggunakan jidar atas foto sebagai titik rujukan.

Kes #2:

Satu lagi contoh di mana teknik ini mungkin berguna ialah apabila bekerja dengan jadual- susun atur berasaskan. Sebagai contoh, anda mungkin ingin mencipta menu berbilang peringkat mendatar yang merangkumi keseluruhan lebar bekas. Oleh kerana sel jadual tidak menyokong kedudukan: relatif, anda boleh menggunakan kedudukan: mutlak tanpa nilai atas/kiri/bawah/kanan seperti yang ditunjukkan di bawah:

<table>
Salin selepas log masuk
#menu td {
  position: absolute;
  height: 100%;
  width: 100%;
}
Salin selepas log masuk

Dalam senario ini, kedudukan: harta mutlak tanpa sebarang nilai tambahan meletakkan setiap sel dalam jadual berbanding dengan sempadan jadual, membolehkan anda mencipta menu berbilang peringkat mutlak yang sejajar dengan lancar.

Mengikut Piawaian CSS:

Secara amnya, Spesifikasi CSS menyatakan bahawa jika sifat atas/bawah atau kiri/kanan ditetapkan kepada auto, ia harus lalai kepada kedudukan elemen: nilai statik. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pelaksanaan penyemak imbas mungkin berbeza dalam sokongannya untuk kedudukan mutlak tanpa menetapkan nilai atas/kiri/bawah/kanan secara eksplisit.

Atas ialah kandungan terperinci Bolehkah Anda Gunakan `kedudukan: mutlak` Tanpa Menetapkan `atas`, `kiri`, `bawah` atau `kanan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!