지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-06-24 11:59:28
원래의
813명이 탐색했습니다.

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

관련 라벨：
position 布局
원천：php.cn
이전 기사：Pattern Lab 다음 기사：CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
POST 요청은 Postman을 사용할 때 잘 작동하지만 React axios 및 Spring Boot 백엔드를 사용할 때는 작동하지 않습니다. 반응 콘솔에서 "리소스를 로드할 수 없습니다: 서버 응답 상태는 500()"이라는 오류 메시지가 나타납니다. SpringBoot 백엔드에서 &q...
에서 2024-04-05 13:07:01
0
1
396
nginx Proxy_pass 설정을 수정한 후 내 React 앱이 로드되지 않습니다. ReactappNodeJS 백엔드와 nginx가 있습니다. 인증서를 받아 Certbot을 통해 설치했습니다. 내 애플리케이션에서는 get 및 post 요청을 수행...
에서 2024-04-05 11:53:10
0
1
316
캔버스의 *두* 높이 값을 얻으시겠습니까? 이 캔버스의 두 가지 높이 값을 얻으려고 합니다. <canvaswidth="886"height="792"style=&qu...
에서 2024-04-05 09:32:33
0
1
1360
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿