Rumah >hujung hadapan web >html tutorial >关于position布局的问题_html/css_WEB-ITnose
关于position布局的问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:59:28840semak imbas
<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> 效果图
left跟right是两张背景图片，要求放在center的两边，现在问题是因为right占了宽度，底部会出现滚动条，如果往header里面加overflow：hidden；滚动条消失了，但是left跟right会被下面的menu挡住了。有没有办法让left跟right不被挡住而且在menu上面。
总的来说就是要left跟right两张图片不被menu挡住，然后底部不会出现滚动条，当遇到很宽屏幕的时候能看见left跟right的全部样子。
回复讨论(解决方案)
好像只能把left跟right两个合成一个，做header的背景。。
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：Pattern LabArtikel seterusnya：CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose