Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak-tutorial css-php.cn

Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak

王林

Lepaskan： 2024-01-23 09:18:15

asal

470 orang telah melayarinya

Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak

Untuk menguasai sifat asas dan penggunaan elemen kedudukan mutlak, contoh kod khusus diperlukan

Dalam reka bentuk dan pembangunan web, kedudukan mutlak ialah kaedah reka letak yang biasa dan biasa digunakan. Dengan kedudukan mutlak, kita boleh meletakkan elemen tepat pada lokasi yang ditentukan tanpa dipengaruhi oleh elemen lain. Menguasai sifat asas dan penggunaan elemen kedudukan mutlak boleh membantu kami mengawal dan susun atur halaman web dengan lebih baik. Artikel ini akan memperkenalkan sifat asas dan penggunaan elemen yang diposisikan secara mutlak, dan memberikan contoh kod khusus.

Dalam CSS, anda menentukan cara sesuatu elemen diletakkan dengan menggunakan atribut kedudukan. Kedudukan mutlak adalah salah satu kaedah, yang dicapai dengan menetapkan nilai atribut kedudukan kepada mutlak. Elemen yang diposisikan secara mutlak dikeluarkan daripada aliran dokumen dan diposisikan secara relatif kepada elemen induk kedudukan terdekatnya. Jika tiada elemen induk yang diposisikan, elemen tersebut akan diposisikan secara relatif kepada elemen badan.

Elemen yang diposisikan secara mutlak mempunyai sifat asas berikut:

atas: Menentukan jarak elemen berbanding bahagian atas elemen induk.
kanan: Menentukan jarak elemen berbanding sebelah kanan elemen induk.
bawah: Menentukan jarak elemen berbanding bahagian bawah elemen induk.
kiri: Menentukan jarak elemen berbanding sebelah kiri elemen induk.

Dengan menetapkan nilai atribut atas, kanan, bawah dan kiri, kita boleh mengawal kedudukan elemen dengan tepat. Nilai ini boleh menjadi nilai piksel tertentu atau nilai peratusan. Di bawah ialah kod sampel ringkas yang menunjukkan cara menggunakan atribut kedudukan mutlak.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
    }
    
    .box {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam kod contoh di atas, kami mencipta elemen bekas .bekas dan menetapkan lebar dan ketinggiannya. Kami kemudiannya mencipta elemen .box di dalam .container dan meletakkannya sebagai elemen dengan kedudukan mutlak. Dengan menetapkan nilai atribut atas dan kiri, kami meletakkan elemen .box di dalam elemen .container, 50 piksel dari bahagian atas dan kiri elemen induk.

Selain atribut kedudukan asas, elemen kedudukan mutlak juga boleh menggunakan atribut indeks-z untuk mengawal susunan susunan elemen. Nilai atribut indeks-z boleh positif, negatif atau 0. Semakin besar nilai indeks-z sesuatu elemen, semakin tinggi ia akan muncul pada lapisan atas. Berikut ialah kod sampel konkrit yang menunjukkan cara menggunakan atribut indeks-z:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
      z-index: 1;
    }
    
    .box2 {
      position: absolute;
      top: 150px;
      left: 150px;
      width: 100px;
      height: 100px;
      background-color: blue;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod sampel di atas, kami telah mencipta dua elemen kotak .box1 dan .box2 dengan nilai indeks-z yang berbeza. Memandangkan .box2 mempunyai nilai indeks-z yang lebih besar, ia akan muncul di atas .box1, sekali gus meliputi sebahagian daripada .box1.

Sifat asas dan penggunaan elemen kedudukan mutlak adalah seperti yang dinyatakan di atas. Dengan menguasai sifat dan penggunaan ini, kami boleh mengawal dan susun atur halaman web dengan lebih baik. Pada masa yang sama, kami juga boleh menggabungkan sifat dan teknik CSS lain untuk mengembangkan dan mengoptimumkan lagi reka letak dan reka bentuk halaman web. Semoga contoh kod dan arahan yang disediakan dalam artikel ini akan membantu pembaca lebih memahami dan menggunakan kedudukan mutlak.

Atas ialah kandungan terperinci Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!