Rumah hujung hadapan web html tutorial 怎么利用css进行定位?css布局与定位详解

怎么利用css进行定位?css布局与定位详解

Oct 31, 2018 pm 05:29 PM
kedudukan css susun atur css

怎么利用css进行定位?CSS可以帮助您定位HTML元素。 您可以将任何HTML元素放在您喜欢的任何位置。 您可以指定是否希望元素相对于页面中的自然位置定位,还是基于其父元素定义,下面我们来讲解一下css布局与定位。

微信截图_20181031172632.png

一:相对定位

相对定位会更改HTML元素相对于正常显示位置的位置。left:20为元素的LEFT位置增加了20个像素。【推荐阅读:相对定位,绝对定位与固定定位详解

您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

向左移动 - 左侧使用负值。

向右移动 - 使用左侧的正值。

上移 - 使用顶部的负值。

下移 - 为top使用正值。

注意 - 您也可以使用底部或右侧的值,方法与顶部和左侧相同。

二:绝对定位 

position:absolute的元素位于相对于屏幕左上角的指定坐标处。

您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

向左移动 - 左侧使用负值。

向右移动 - 使用左侧的正值。

上移 - 使用顶部的负值。

下移 - 为top使用正值。

注意 - 您也可以使用底部或右侧的值,方法与顶部和左侧相同。

三:固定定位

固定定位允许您将元素的位置固定到页面上的特定位置,而不管滚动。 指定的坐标将相对于浏览器窗口。

您可以使用top和left两个值以及position属性将HTML元素移动到HTML文档中的任何位置。

向左移动 - 左侧使用负值。

向右移动 - 使用左侧的正值。

上移 - 使用顶部的负值。

下移 - 为top使用正值。

注意 - 您也可以使用底部或右侧的值,方法与顶部和左侧相同。

以上就是对怎么利用css进行定位?css布局与定位详解的全部解释,如果你想了解更多有关CSS教程,请关注php中文网。


Atas ialah kandungan terperinci 怎么利用css进行定位?css布局与定位详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

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 lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Soalan yang sering ditanya oleh penemuduga front-end Soalan yang sering ditanya oleh penemuduga front-end Mar 19, 2024 pm 02:24 PM

Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.

Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar Jan 05, 2024 pm 05:41 PM

Dari px ke rem: Evolusi dan aplikasi unit susun atur CSS Pengenalan: Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan CSS untuk melaksanakan reka letak halaman. Sejak beberapa tahun kebelakangan ini, unit susun atur CSS telah berkembang dan berkembang. Pada mulanya kami menggunakan piksel (px) sebagai unit untuk menetapkan saiz dan kedudukan elemen. Walau bagaimanapun, dengan peningkatan reka bentuk responsif dan populariti peranti mudah alih, unit piksel telah mendedahkan beberapa masalah secara beransur-ansur. Untuk menyelesaikan masalah ini, rem unit baharu wujud dan secara beransur-ansur digunakan secara meluas dalam reka letak CSS. satu

Kaedah dan teknik bagaimana untuk melaksanakan susun atur aliran air terjun melalui CSS tulen Kaedah dan teknik bagaimana untuk melaksanakan susun atur aliran air terjun melalui CSS tulen Oct 20, 2023 pm 06:01 PM

Kaedah dan teknik tentang cara melaksanakan susun atur aliran air terjun melalui CSS tulen (Susun Letak Air Terjun) ialah kaedah reka letak biasa dalam reka bentuk web. Reka letak ini sering digunakan dalam situasi di mana sejumlah besar kandungan perlu dipaparkan, seperti paparan gambar dan paparan produk, dan mempunyai pengalaman pengguna yang baik. Terdapat banyak cara untuk melaksanakan susun atur air terjun, dan ia boleh dilakukan menggunakan JavaScript atau CSS.

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Ikon Grid Pekeliling Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Ikon Grid Pekeliling Oct 20, 2023 am 10:46 AM

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Tataletak Ikon Grid Pekeliling Susun atur Grid ialah teknik reka letak yang biasa dan berkuasa dalam reka bentuk web moden. Susun atur ikon grid bulat adalah pilihan reka bentuk yang lebih unik dan menarik. Artikel ini akan memperkenalkan beberapa amalan terbaik dan contoh kod khusus untuk membantu anda melaksanakan reka letak ikon grid bulat. Struktur HTML Mula-mula, kita perlu menyediakan elemen bekas dan letakkan ikon dalam bekas ini. Kita boleh menggunakan senarai tidak tertib (<ul>) sebagai bekas dan item senarai (<l

Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur imej responsif Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur imej responsif Sep 26, 2023 pm 01:37 PM

Kaedah susun atur CSSPositions untuk melaksanakan susun atur imej responsif Dalam pembangunan web moden, reka bentuk responsif telah menjadi kemahiran penting. Dalam reka bentuk responsif, susun atur imej adalah salah satu pertimbangan penting. Artikel ini akan memperkenalkan cara menggunakan reka letak CSSPositions untuk melaksanakan reka letak imej responsif dan menyediakan contoh kod khusus. CSSPositions ialah kaedah susun atur CSS yang membolehkan kami meletakkan elemen sewenang-wenangnya dalam halaman web mengikut keperluan. Dalam susun atur imej responsif,

Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Holy Grail Tutorial Reka Letak CSS: Cara Terbaik untuk Melaksanakan Reka Letak Holy Grail Oct 19, 2023 am 10:19 AM

Tutorial Layout CSS: Cara Terbaik untuk Melaksanakan Holy Grail Layout, dengan Contoh Kod Pengenalan: Dalam pembangunan web, reka letak adalah bahagian yang sangat penting. Reka letak yang baik boleh menjadikan halaman web lebih mudah dibaca dan boleh diakses. Antaranya, susun atur Holy Grail ialah kaedah susun atur yang sangat klasik Ia boleh memusatkan kandungan dan mengekalkan kesan paparan yang elegan sambil mencapai kebolehsuaian. Artikel ini akan memperkenalkan cara menggunakan kaedah terbaik untuk melaksanakan susun atur Holy Grail dan memberikan contoh kod khusus. 1. Apakah susun atur Holy Grail? Susun atur Holy Grail ialah susun atur tiga lajur biasa.

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Kad Bertindan Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Kesan Kad Bertindan Oct 22, 2023 am 08:19 AM

Petua Reka Letak CSS: Amalan Terbaik untuk Mencapai Kesan Kad Bertindan Dalam reka bentuk web moden, reka letak kad telah menjadi trend reka bentuk yang sangat popular. Reka letak kad boleh memaparkan maklumat dengan berkesan, memberikan pengalaman pengguna yang baik dan memudahkan reka bentuk responsif. Dalam artikel ini, kami akan berkongsi beberapa teknik reka letak CSS terbaik untuk mencapai kesan kad bertindan, bersama-sama dengan contoh kod khusus. Reka letak menggunakan Flexbox Flexbox ialah model susun atur berkuasa yang diperkenalkan dalam CSS3. Ia boleh mencapai kesan menyusun kad dengan mudah

Panduan Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Grid Panduan Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Grid Oct 26, 2023 am 10:00 AM

Panduan Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Reka Letak Grid Pengenalan: Dalam reka bentuk web moden, reka letak grid telah menjadi kaedah reka letak yang sangat popular. Ia boleh membantu kami menyusun struktur halaman dengan lebih baik dan menjadikannya lebih hierarki dan boleh dibaca. Artikel ini akan memperkenalkan amalan terbaik reka letak grid dan contoh kod khusus untuk membantu anda melaksanakan reka letak grid dengan lebih baik. 1. Apakah susun atur grid? Reka letak grid merujuk kepada membahagikan halaman kepada berbilang lajur dan baris melalui grid, supaya unsur-unsur halaman boleh disusun dengan mudah mengikut peraturan tertentu. susun atur grid

See all articles