cari
Rumahhujung hadapan webtutorial cssCSS定位position的技法

CSS定位position的技法

Feb 27, 2017 am 09:38 AM

本文针对CSS常用的6个属性进行探究,大家一定会对这篇文章满意的。

1.position:static

static属性是position的默认值,也就是说,当一个元素没有为其设定position属性时,它的默认值就是static。

2.position:absolute

这是一个经常会被用到的position属性值。如果为某个元素设定了absolute,则该元素脱离原来的文档流。形象一些说,比如a元素被定义了position:absolute,那么这个元素就不会与这个页面中的其他元素发生位置上的关系,而是凌驾于整个页面之上的漂浮状态。页面中的其他元素的位置变化、大小变化等,都不会影响a元素的位置,相当于一个局外人。

3.position:relative

relative是最有用的定义方法。设置了relative属性表示,该元素相对于自己原来位置发生的变化。比如,我们定义了一个b元素,给它设定如下css样式:

#b{     
    position: relative;     
    width:100px;     
    height:100px;     
    top:100px;     
}

该段代码定义的b元素,它的位置为相对于没有定义position属性的位置向下移动100px的距离。relative属性值的定义就是这样的定位模式。

4.position:fixed

fixed定位用的不多,但是它非常适用于固定模式的部分制作,比如顶部菜单。定义了fixed属性后,元素的位置不会随着任何行为发生变化。

5.relative+position

同时使用这两个定位,是一种很常用的手法,新手也可能会在此处遇见很多麻烦。总体来说,如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。比如,下面的代码利用二者的结合实现了一个两列布局;

<span style="white-space:pre">    </span>#p-1 {     
             position:relative;     
            }     
            #p-1a {     
             position:absolute;     
             top:0;     
             rightright:0;     
             width:200px;     
            }     
            #p-1b {     
             position:absolute;     
             top:0;     
             left:0;     
             width:200px;     
            }

内部的两个子p会根据其外部定位为relative的元素为参照进行绝对定位。

6.clear:both清除浮动

有的时候定位会出现塌陷现象,即子元素在父元素中,但是父元素的大小不会随着子元素的大小而被“”撑开“,导致了父元素的塌陷效果。这种bug的出现是由于子元素设定了 float属性,导致父元素的坍塌。要想解决这种bug,需要为父元素设定清除浮动。示例代码如下:

<span style="white-space:pre">    </span>    #p-1a {     
             float:left;     
             width:190px;     
            }     
            #p-1b {     
             float:left;     
             width:190px;     
            }     
            #p-1c {     
             clear:both;     
            }

以上就是关于CSS定位中常用的六个属性学习,希望对大家的学习有所帮助。

更多CSS定位position的技法相关文章请关注PHP中文网!

Kenyataan
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
Dua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductDua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductApr 15, 2025 am 11:27 AM

Baru -baru ini saya dapati penyelesaian untuk mengemas kini warna mana -mana imej produk. Jadi dengan hanya satu produk, kita boleh mewarnakannya dengan cara yang berbeza untuk ditunjukkan

Berita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatBerita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatApr 15, 2025 am 11:19 AM

Pada minggu ini, Roundup, Lighthouse menyoroti cahaya pada skrip pihak ketiga, sumber yang tidak selamat akan disekat di tapak yang selamat, dan banyak kelajuan sambungan negara

Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriPilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriApr 15, 2025 am 11:09 AM

Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas

Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactIa ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactApr 15, 2025 am 11:01 AM

Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai

Apa itu Super () dalam JavaScript?Apa itu Super () dalam JavaScript?Apr 15, 2025 am 10:59 AM

Apa yang berlaku apabila anda melihat beberapa JavaScript yang memanggil Super (). Dalam kelas kanak -kanak, anda menggunakan super () untuk memanggil pembina ibu bapa dan super. untuk mengaksesnya

Membandingkan pelbagai jenis popup JavaScript asliMembandingkan pelbagai jenis popup JavaScript asliApr 15, 2025 am 10:48 AM

JavaScript mempunyai pelbagai API popup terbina dalam yang memaparkan UI khas untuk interaksi pengguna. Terkenal:

Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Apr 15, 2025 am 10:45 AM

Saya sedang berbual dengan beberapa orang depan pada hari yang lain tentang mengapa begitu banyak syarikat berjuang untuk membuat laman web yang boleh diakses. Mengapa laman web yang boleh diakses begitu sukar

Atribut `tersembunyi` kelihatan lemahAtribut `tersembunyi` kelihatan lemahApr 15, 2025 am 10:43 AM

Terdapat atribut HTML yang betul -betul apa yang anda fikir harus dilakukan:

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna