Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial 关于position布局的问题_html/css_WEB-ITnose

关于position布局的问题_html/css_WEB-ITnose

Jun 24, 2016 am 11:59 AM
position susun atur

<body><style>*{ margin:0; padding:0;}.header{ width:100%; background:blue; }.menu{ width:100%; background:gray; height:40px;}.center{ width:940px; margin:0 auto; height:100px; background:red; position:relative;}.left{ position:absolute; top:0; left:-420px; width:420px; height:160px; background:yellow;}.right{ position:absolute; top:0; right:-420px; width:420px; height:160px; background:yellow;}</style><div class="header">	<div class="center">    	 <div class="left"></div>         <div class="right"></div>        </div></div><div class="menu"></div></body>
Salin selepas log masuk

效果图


left跟right是两张背景图片,要求放在center的两边,现在问题是因为right占了宽度,底部会出现滚动条,如果往header里面加overflow:hidden;滚动条消失了,但是left跟right会被下面的menu挡住了。有没有办法让left跟right不被挡住而且在menu上面。

总的来说就是要left跟right两张图片不被menu挡住,然后底部不会出现滚动条,当遇到很宽屏幕的时候能看见left跟right的全部样子。


回复讨论(解决方案)

好像只能把left跟right两个合成一个,做header的背景。。

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)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
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)

Panduan untuk menyelesaikan salah jajaran halaman web WordPress Panduan untuk menyelesaikan salah jajaran halaman web WordPress Mar 05, 2024 pm 01:12 PM

Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan

Cara membuat susun atur karusel responsif menggunakan HTML dan CSS Cara membuat susun atur karusel responsif menggunakan HTML dan CSS Oct 20, 2023 pm 04:24 PM

Cara membuat reka letak karusel responsif menggunakan HTML dan CSS Karusel ialah elemen biasa dalam reka bentuk web moden. Ia boleh menarik perhatian pengguna, memaparkan berbilang kandungan atau imej, dan bertukar secara automatik. Dalam artikel ini, kami akan memperkenalkan cara membuat reka letak karusel responsif menggunakan HTML dan CSS. Pertama, kita perlu mencipta struktur HTML asas dan menambah gaya CSS yang diperlukan. Berikut ialah struktur HTML ringkas: &lt;!DOCTYPEhtml&g

Robot ETF (562500) mungkin membuka peluang susun atur yang baik kerana ia telah ditarik balik selama 3 hari berturut-turut! Robot ETF (562500) mungkin membuka peluang susun atur yang baik kerana ia telah ditarik balik selama 3 hari berturut-turut! Dec 01, 2023 pm 04:01 PM

Pada awal dagangan pada 1 Disember 2023, tiga indeks saham utama dibuka lebih rendah. Robot ETF (562500) mula berdagang mengiring selepas jatuh pada awal sesi. Sehingga 10:20, Robot ETF (562500) jatuh 0.92%, dengan lebih daripada 60 daripada 82 pegangan jatuh. Teknologi Daheng dan Teknologi Shitou jatuh lebih daripada 5%, dan Teknologi Sukron, Perisikan Keda, Teknologi Xianhui dan Teknologi Hongxun jatuh lebih daripada 3%. Pada awal dagangan hari ini, Robot ETF (562500) telah membetulkan selama tiga hari berturut-turut. Mengimbas kembali keadaan pada bulan lalu, Robot ETF (562500) hanya mempunyai satu pembetulan selama tiga hari berturut-turut, dan kemudian membawa kepada lapan arah aliran positif berturut-turut. Penarikan balik ini mungkin merupakan peluang susun atur yang baik berikutan pengumuman oleh jabatan berkaitan pada awal November.

Kemahiran aplikasi fleksibel atribut kedudukan dalam H5 Kemahiran aplikasi fleksibel atribut kedudukan dalam H5 Dec 27, 2023 pm 01:05 PM

Bagaimana untuk menggunakan atribut kedudukan secara fleksibel dalam H5 Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5.

Memperkenalkan kaedah susunan tingkap dalam win7 Memperkenalkan kaedah susunan tingkap dalam win7 Dec 26, 2023 pm 04:37 PM

Apabila kami membuka berbilang tetingkap pada masa yang sama, win7 mempunyai fungsi mengatur berbilang tetingkap dengan cara yang berbeza dan kemudian memaparkannya pada masa yang sama, yang membolehkan kami melihat kandungan setiap tetingkap dengan lebih jelas. Jadi berapa banyak susunan tetingkap yang ada dalam win7? Mari kita lihat dengan editor. Terdapat beberapa cara untuk menyusun tetingkap Windows 7: tiga, iaitu tingkap berlatarkan, tingkap paparan bertindan dan tingkap paparan bersebelahan. Apabila kita membuka berbilang tetingkap, kita boleh klik kanan pada ruang kosong pada bar tugas. Anda boleh melihat tiga susunan tingkap. 1. Tingkap bertindan: 2. Tingkap paparan bertindan: 3. Tetingkap paparan bersebelahan:

Windows 11 terus menambah susun atur papan kekunci: 4 penyelesaian yang diuji Windows 11 terus menambah susun atur papan kekunci: 4 penyelesaian yang diuji Dec 14, 2023 pm 05:49 PM

Bagi sesetengah pengguna, Windows 11 terus menambah reka letak papan kekunci baharu walaupun mereka tidak menerima atau mengesahkan perubahan itu. Pasukan perisian WindowsReport telah mereplikasi isu ini dan mengetahui cara menghalang Windows 11 daripada menambah susun atur papan kekunci baharu pada PC anda. Mengapa Windows 11 menambah susun atur papan kekuncinya sendiri? Ini biasanya berlaku apabila menggunakan bahasa bukan asli dan gabungan papan kekunci. Contohnya, jika anda menggunakan bahasa paparan AS dan susun atur papan kekunci Perancis, Windows 11 juga boleh menambah papan kekunci bahasa Inggeris. Perkara yang perlu dilakukan jika Windows 11 menambah susun atur papan kekunci baharu yang anda tidak mahu. Bagaimana untuk menghalang Windows 11 daripada menambah susun atur papan kekunci? 1. Padamkan susun atur papan kekunci yang tidak perlu dan klik "Buka"

Senario penggunaan sintaks mengandungi dalam CSS Senario penggunaan sintaks mengandungi dalam CSS Feb 21, 2024 pm 02:00 PM

Senario penggunaan sintaks mengandungi dalam CSS Dalam CSS, mengandungi ialah atribut berguna yang menentukan sama ada kandungan elemen adalah bebas daripada gaya dan reka letak luarannya. Ia membantu pembangun mengawal reka letak halaman dengan lebih baik dan mengoptimumkan prestasi. Artikel ini akan memperkenalkan senario penggunaan sintaks atribut contain dan memberikan contoh kod khusus. Sintaks atribut contain adalah seperti berikut: contain:layout|paint|size|style|'noe'|'stric

Petua pengoptimuman sifat reka letak CSS: kedudukan melekit dan flexbox Petua pengoptimuman sifat reka letak CSS: kedudukan melekit dan flexbox Oct 20, 2023 pm 03:15 PM

Petua pengoptimuman atribut reka letak CSS: positionsticky dan flexbox Dalam pembangunan web, reka letak adalah aspek yang sangat penting. Struktur susun atur yang baik boleh meningkatkan pengalaman pengguna dan menjadikan halaman lebih cantik dan mudah dinavigasi. Ciri reka letak CSS adalah kunci untuk mencapai matlamat ini. Dalam artikel ini, saya akan memperkenalkan dua teknik pengoptimuman sifat reka letak CSS yang biasa digunakan: positionsticky dan flexbox, dan memberikan contoh kod khusus. 1. jawatan

See all articles