Rumah > Artikel > hujung hadapan web > Contoh CSS kedudukan relatif dan kedudukan mutlak_CSS/HTML

Contoh CSS kedudukan relatif dan kedudukan mutlak_CSS/HTML

WBOYasal: 2016-05-16 12:11:261718semak imbas

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;}

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

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

Artikel sebelumnya：Pada mempunyai layout_CSS/HTMLArtikel seterusnya：Pada mempunyai layout_CSS/HTML

Artikel berkaitan

Lihat lagi