Bagaimana untuk menetapkan kedudukan imej img dalam css

Untuk menetapkan kedudukan imej img dalam CSS, anda perlu menentukan jenis kedudukan (statik, relatif atau mutlak), dan kemudian gunakan atribut atas, kanan, bawah dan kiri untuk menetapkan offset kedudukan. Offset ini menentukan kedudukan imej berbanding jenis kedudukannya.

Cara untuk menetapkan kedudukan imej img dalam CSS

Dalam CSS, anda boleh menggunakan position, top, rightatribut >, bawah dan kiri untuk menetapkan kedudukan imej. position、top、right、bottom 和 left 属性来设置图片的位置。

1. 定位类型

首先，需要设置图片的定位类型。有以下三种定位类型：

• static（默认）：图片位于其正常流位置。
• relative：图片相对于其正常流位置进行偏移。
• absolute：图片相对于其父元素进行定位，脱离正常流。

2. 位置偏移量

使用 top、right、bottom 和 left 属性设置图片相对于其定位类型的位置偏移量：

• top：相对于图片顶部边框的偏移量。
• right：相对于图片右侧边框的偏移量。
• bottom：相对于图片底部边框的偏移量。
• left：相对于图片左侧边框的偏移量。

示例

要将图片绝对定位在页面右下角，可以这样设置：

<code class="css">img {
  position: absolute;
  bottom: 0px;
  right: 0px;
}</code>

其他提示

• 偏移量值可以是像素（px）、百分比（%）或关键字（例如 auto）。
• 如果设置了多个位置属性，它们将以以下优先级应用：top、right、bottom、left。
• 当使用 absolute 定位时，图片将从正常流中脱离，意味着它不会再占据空间。
• 使用 z-index

• 🎜statik (lalai): 🎜Imej diletakkan dalam kedudukan aliran biasa. 🎜
• 🎜relatif: 🎜Imej diimbangi secara relatif kepada kedudukan aliran normalnya. 🎜
• 🎜mutlak: 🎜Imej diletakkan secara relatif kepada elemen induknya, di luar aliran biasa. 🎜🎜🎜🎜2 Kedudukan mengimbangi 🎜🎜🎜 menggunakan atribut atas, kanan, bawah dan kiri atribut Tetapkan mengimbangi kedudukan imej berbanding jenis kedudukannya: 🎜
  • atas: Mengimbang berbanding sempadan atas imej. 🎜
  • kanan: Mengimbangi relatif kepada jidar kanan imej. 🎜
  • bawah: Mengimbangi relatif kepada sempadan bawah imej. 🎜
  • kiri: Offset relatif kepada sempadan kiri imej. 🎜🎜🎜🎜Contoh🎜🎜🎜Untuk meletakkan imej secara mutlak di penjuru kanan sebelah bawah halaman, anda boleh menetapkannya seperti ini:🎜rrreee🎜🎜Petua lain🎜🎜
    • Nilai offset boleh menjadi piksel ( px), peratusan (%) atau kata kunci (seperti auto). 🎜
    • Jika berbilang sifat kedudukan ditetapkan, ia akan digunakan dengan keutamaan berikut: atas, kanan, bawah, kiri. 🎜
    • Apabila menggunakan kedudukan absolute, imej akan dialihkan daripada aliran biasa, bermakna ia tidak lagi menggunakan ruang. 🎜
    • Gunakan atribut z-index untuk mengawal susunan susunan imej dalam elemen bertindih. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan imej img dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!