关于position布局的问题_html/css_WEB-ITnose
<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的背景。。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
WordPress网页错位现象解决攻略
Mar 05, 2024 pm 01:12 PM
WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开
如何使用HTML和CSS创建一个响应式轮播图布局
Oct 20, 2023 pm 04:24 PM
如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中，轮播图是一个常见的元素。它能够吸引用户的注意力，展示多个内容或图片，并且能够自动切换。在本文中，我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先，我们需要创建一个基本的HTML结构，并添加所需的CSS样式。以下是一个简单的HTML结构：<!DOCTYPEhtml&g
H5中position属性的灵活运用技巧
Dec 27, 2023 pm 01:05 PM
H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性
机器人ETF(562500)或迎来布局良机，因为它已连续回调3天！
Dec 01, 2023 pm 04:01 PM
2023年12月1日早盘，三大股指出现低开局面。机器人ETF（562500）在盘初出现下跌后开始横盘震荡。截至10:20，机器人ETF（562500）下跌了0.92%，其中82只持仓股中超过60只下跌。大恒科技、石头科技的跌幅超过了5%，中控技术、科大智能、先惠技术、弘讯科技的跌幅超过了3%。截至今日早盘，机器人ETF（562500）已经连续三天回调。回顾近一个月的情况，机器人ETF（562500）只有一次连续三天回调的情况，并且随后迎来了八连阳的行情。这次回调可能是一个布局良机继11月初有关部
Windows 11 不断添加键盘布局：4 种经过测试的解决方案
Dec 14, 2023 pm 05:49 PM
对于某些用户来说，Windows11会不断添加新的键盘布局，即使他们没有接受或确认更改。WindowsReport软件团队复制了此问题，并且知道如何防止Windows11在您的PC上添加新的键盘布局。为什么Windows11要自行添加键盘布局？这通常发生在使用非母语和键盘组合时。例如，如果您使用的是美国显示语言和法语键盘布局，Windows11可能还会添加英语键盘。如果Windows11添加了您不想要的新键盘布局，该怎么办。如何防止Windows11添加键盘布局？1.删除不需要的键盘布局单击“开
介绍win7里的窗口排列方式
Dec 26, 2023 pm 04:37 PM
当我们同时打开多个窗口时，win7具有将多个窗口以不同方式排列然后同时显示的功能，能够让我们更加清晰地查看到每一个窗口的内容。那么win7窗口排列方式有几种呢，他们分别都是什么样的呢，下面就跟着小编一起来看一下吧。win7窗口排列方式有几种答：三种，分别是层叠窗口、堆叠显示窗口和并排显示窗口。当我们打开多个窗口时，可以右键点击任务栏空白处。就可以看到三种窗口排列方式了。一、层叠窗口：二、堆叠显示窗口：三、并排显示窗口：
CSS中contain的语法使用场景
Feb 21, 2024 pm 02:00 PM
CSS中contain的语法使用场景在CSS中，contain是一个有用的属性，用于指定元素的内容是否独立于其外部样式和布局。它可以帮助开发者更好地控制页面布局和优化性能。本文将介绍contain属性的语法使用场景，并提供具体的代码示例。contain属性的语法如下：contain:layout|paint|size|style|'none'|'stric
h5如何使用position
Dec 26, 2023 pm 01:39 PM
在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。
