masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 关于position布局的问题_html/css_WEB-ITnose

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

WBOY
Lepaskan： 2016-06-24 11:59:28
asal
834 orang telah melayarinya

<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的背景。。

Label berkaitan：
position 布局
sumber：php.cn
Artikel sebelumnya：Pattern Lab Artikel seterusnya：CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
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
Apakah format pembolehubah dalam nilai pulangan? Saya seorang pelajar baru php. Saya menjumpai sekeping kod: if($x<time()){return[false,...
daripada 2024-04-06 21:55:20
0
1
778
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Permintaan POST berfungsi dengan baik apabila menggunakan Postman tetapi tidak apabila menggunakan React axios dan Spring Boot backend Daripada konsol reaksi saya mendapat ralat "Tidak dapat memuatkan sumber: Status resp...
daripada 2024-04-05 13:07:01
0
1
396
Apl React Saya tidak akan dimuatkan selepas mengubah suai tetapan proxy_pass nginx Saya mempunyai backend dan nginx ReactappNodeJS. Saya telah memperoleh sijil dan memasangn...
daripada 2024-04-05 11:53:10
0
1
316
Dapatkan *dua* nilai ketinggian kanvas? Saya cuba mendapatkan dua nilai ketinggian kanvas ini. <canvaswidth="886"heig...
daripada 2024-04-05 09:32:33
0
1
1360
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