Home >Web Front-end >HTML Tutorial >Questions about position layout_html/css_WEB-ITnose
Questions about position layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:59:28844browse
<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> Rendering
Left and right are two background images, which are required to be placed on both sides of the center. The problem now is that because right occupies the width, a scroll bar will appear at the bottom , if you add overflow: hidden to the header; the scroll bar disappears, but the left and right will be blocked by the menu below. Is there any way to make left and right not blocked and above the menu?
Generally speaking, the left and right pictures should not be blocked by the menu, and the scroll bar will not appear at the bottom. When encountering a very wide screen, you can see the full appearance of left and right.
Reply to the discussion (solution)
It seems that you can only combine left and right into one to make the background of the header. .
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Pattern LabNext article：Pattern Lab