Bagaimana untuk menetapkan div untuk digantung menggunakan css

Dalam CSS, anda boleh menggunakan atribut kedudukan untuk menetapkan kedudukan mutlak untuk mencapai div terapung Anda hanya perlu menambah "{position:absolute;top: distance from the top of the page; left: distance from the sebelah kiri halaman;} ke elemen div "Gaya sudah memadai.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menetapkan penggantungan div dalam css

1 Cipta fail html baharu dan namakannya sebagai test.html untuk menerangkan cara membuatnya kerja dalam div CSS digantung. Dalam fail test.html, gunakan teg div untuk mencipta div dan tetapkan atribut kelasnya kepada con, yang digunakan terutamanya untuk menetapkan gaya melalui nama kelas di bawah.

2 Dalam fail test.html, gunakan tag p dalam div untuk mencipta paparan teks ujian. Dalam fail test.html, dalam div, gunakan teg div untuk mencipta div dengan nama kelas ff, yang digunakan sebagai div yang digantung.

3 Dalam fail test.html, dalam teg css, gunakan "*" untuk memulakan gaya elemen dan tetapkan jidar luar dan jidar dalam kepada 0. Pada masa yang sama, tetapkan gaya div dengan con nama kelas, tetapkan warna latar belakangnya kepada kelabu, penjajaran tengah, lebar kepada 640px dan tinggi kepada 1000px.

Dalam teg css, tetapkan gaya dengan nama kelas ff, tetapkan ketinggian dan lebarnya kepada 100px, dan warna latar belakang kepada merah. Gunakan atribut kedudukan kedudukan untuk menetapkan kedudukan mutlak div pada halaman, 20px dari bahagian atas halaman , jarak dari sebelah kiri halaman ialah 0px, supaya div boleh digantung dalam halaman.

4. Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.

Selain kedudukan, kedudukan juga boleh ditetapkan kepada tetap untuk mencapai penggantungan div.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menetapkan div untuk digantung menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!