<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>Copy after login
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. .
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
