Pelaksanaan kaedah rujukan kedudukan mutlak-tutorial css-php.cn

Pelaksanaan kaedah rujukan kedudukan mutlak

王林

Lepaskan： 2024-01-23 08:58:05

asal

509 orang telah melayarinya

Pelaksanaan kaedah rujukan kedudukan mutlak

Kaedah rujukan untuk mencapai kedudukan mutlak memerlukan contoh kod khusus

Dengan pembangunan berterusan pembangunan web, keperluan untuk susun atur halaman semakin tinggi. Kedudukan mutlak ialah kaedah reka letak biasa yang menentukan kedudukan elemen pada halaman dengan tepat. Artikel ini akan memperkenalkan cara untuk mencapai kedudukan mutlak melalui CSS dan memberikan contoh kod khusus.

1. Fahami konsep asas kedudukan mutlak

Sebelum anda mula menulis kod, anda perlu memahami konsep asas kedudukan mutlak. Dalam CSS, penentududukan mutlak menentukan kedudukan elemen berbanding dengan elemen induk terdekat yang mempunyai atribut kedudukan (atribut kedudukan tidak statik). Jika tiada elemen induk mempunyai atribut penentududukan, kedudukan elemen akan diposisikan secara relatif kepada tetingkap penyemak imbas.

2. Contoh kod kedudukan mutlak asas

Berikut ialah contoh struktur HTML yang mudah:

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  position: relative;
  width: 400px;
  height: 300px;
}

#box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 150px;
  background-color: red;
}
</style>
</head>
<body>

<div id="container">
  <div id="box"></div>
</div>

</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mencipta bekas elemen induk dan kotak elemen anak. Bekas elemen induk menggunakan kedudukan: atribut relatif, manakala kotak elemen anak menggunakan kedudukan: atribut mutlak. Dan tentukan kedudukan dan saiz kotak sub-elemen melalui atribut atas, kiri, lebar dan ketinggian.

3. Kaedah rujukan untuk mencapai kedudukan mutlak

Dalam pembangunan sebenar, kadangkala perlu menggunakan objek rujukan yang berbeza untuk mencapai kedudukan mutlak. Dua kaedah yang biasa digunakan akan diperkenalkan di sini, satu ialah menggunakan elemen induk sebagai objek rujukan, dan satu lagi ialah menggunakan sempadan halaman sebagai objek rujukan.

Gunakan elemen induk sebagai rujukan untuk mencapai kedudukan mutlak

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="parent">
  <div class="child"></div>
</div>

</body>
</html>

Salin selepas log masuk

Dalam contoh kod di atas, kami mencipta induk kontena induk dan anak elemen anak. Induk bekas induk menggunakan kedudukan: atribut relatif, dan anak elemen anak menggunakan kedudukan: atribut mutlak. Gunakan atribut atas dan kiri untuk menentukan kedudukan elemen anak berbanding dengan induk bekas induk.

Gunakan sempadan halaman sebagai rujukan untuk mencapai kedudukan mutlak

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.box {
  position: absolute;
  top: 50px;
  left: calc(50% - 100px);
  width: 200px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

Salin selepas log masuk

Dalam contoh kod di atas, kami mencipta bekas bekas dan kotak elemen. Bekas bekas menggunakan kedudukan: atribut relatif, dan kotak elemen menggunakan kedudukan: atribut mutlak. Gunakan atribut atas dan kiri untuk menentukan kedudukan kotak elemen berbanding dengan sempadan halaman. Dalam contoh ini, kami menggunakan fungsi calc() untuk mencapai pemusatan mendatar, dengan calc(50% - 100px) bermakna jarak antara bahagian kiri kotak elemen dan tepi kiri halaman ialah 50% daripada lebar halaman tolak separuh lebar kotak.

Ringkasan:

Melalui contoh dua kaedah di atas, kita boleh mencapai kedudukan mutlak menggunakan elemen induk atau sempadan halaman sebagai rujukan. Kaedah ini sangat praktikal dalam susun atur halaman, dan boleh memberikan permainan penuh kepada kelebihan kedudukan mutlak dan mengawal penempatan elemen dengan tepat. Saya harap pengenalan dalam artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Pelaksanaan kaedah rujukan kedudukan mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!