简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

Contoh CSS kedudukan relatif dan kedudukan mutlak_CSS/HTML

WBOY
Lepaskan： 2016-05-16 12:11:26
asal
1666 orang telah melayarinya


badan
{margin: 30px saiz fon:9pt;}

.a, .b, .c, .d, .e
{
lebar: 100px;
tinggi: 100px;
jidar: 5 auto;
warna: #fff ;
latar belakang: #000;
}
.aa, .bb, .cc, .dd, .ee
{
atas: 10px;
kiri: 10px;
lebar: 10px;
tinggi: 10px;
limpahan: tersembunyi;
latar belakang: #F90;
}
.b, .d, .e
{kedudukan: relatif; }
.cc, .dd, .ee
{kedudukan: mutlak;}



J: Tiada kedudukan ditetapkan, hubungan bersarang umum ialah
< ; /div>



B: Hanya div luar ditetapkan relatif, perhubungan bersarang umum
< ;/div>



C: Hanya div dalam ditetapkan kepada mutlak, dokumen adalah bersarang hubungan, halaman Div dalam diapungkan [tidak terapung], diposisikan relatif kepada halaman, dan tiada kaitan dengan div luar.



badan
{margin: 30px; saiz fon:9pt;}

.a, .b, .c, .d, .e
{
lebar: 100px;
tinggi: 100px;
jidar: 5 auto;
warna: #fff ;
latar belakang: #000;
}
.aa, .bb, .cc, .dd, .ee
{
atas: 10px;
kiri: 10px;
lebar: 10px;
tinggi: 10px;
limpahan: tersembunyi;
latar belakang: #F90;
}
.b, .d, .e
{kedudukan: relatif; }
.cc, .dd, .ee
{kedudukan: mutlak;}



J: Tiada kedudukan ditetapkan, hubungan bersarang umum ialah
< ; /div>



B: Hanya div luar ditetapkan relatif, perhubungan bersarang umum
< ;/div>



C: Hanya div dalam ditetapkan kepada mutlak, dokumen adalah bersarang hubungan, halaman Div dalam diapungkan [tidak terapung], diposisikan relatif kepada halaman, dan tiada kaitan dengan div luar.



D: Div luar ditetapkan kepada relatif, dan div dalam ditetapkan kepada relatif Div ditetapkan kepada mutlak, dan div dalam terapung dan diposisikan relatif kepada div luar




D: Div luar ditetapkan kepada relatif, div dalam ditetapkan kepada relatif dan div dalam diapungkan dan diletakkan relatif kepada div luar



E: Ini adalah untuk menggambarkan masalah sempadan. -10 != terbalikkan jarak 10px

Artikel sebelumnya：Pada mempunyai layout_CSS/HTML Artikel seterusnya：Laraskan susunan jenis CSS untuk menukar effect scrolling link_CSS/HTML
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
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1522
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1682
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1430
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1355
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1405
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！