<div>重叠导致布局问题（1）

最新推荐文章于 2022-03-27 13:03:39 发布

Rhythm_dreams

最新推荐文章于 2022-03-27 13:03:39 发布

阅读量400

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Rhythm_dreams/article/details/50138219

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;} 
.aa{width:1300px;height:306px;background-color: yellow;}
.aa .bb{width:150px;height:105px; background-color:#999; margin-left:100px; margin-top:120px;} 
</style>
</head>
<body>
<div class="aa">
      <div class="bb"></div>
</div> 
</body>
</html>


解决前：

目的：使<div class="bb"> 离<div class="aa">顶部120px;

出现的错误： .bb 中的margin-top：120px; 不是相对于  .aa  的？结果居然连带着.aa一起离<body>顶部120px。

原因：.bb与.aa发生重叠。

解决方案：给.aa一个border值或者一个padding值。

解决后：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rhythm_dreams

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
<div>重叠导致布局问题（1）

<div>重叠导致布局问题。
复制链接

扫一扫

专栏目录

【CSS】CSS常见的布局

Msy_yyy的博客

07-19

390

CSS布局单栏布局一栏布局一栏布局（通栏）两列自适应布局1. float+overflow:hidden2. Flex布局3. Grid布局三栏布局1. 浮动布局2. 绝对定位3. Flex布局4. Table布局5. Grid布局圣杯布局1. Flex布局2. Float布局3. 绝对定位4. Grid布局5. float布局(全部float:left)双飞翼布局品字布局非全屏居中版全屏版单栏布局一栏布局一栏布局：header,content 和 footer 等宽的单列布局布局实现：先通过对

两个div并排的实现代码

09-25

这可以帮助解决浮动元素可能导致的父元素高度塌陷问题，并可以方便地进行居中等其他布局操作。 ```html <div class="container"> <div class="onediv">左</div> <div class="twodiv">右</div> </div> ``` ...

1 条评论您还未登录，请先登录后发表或查看评论

w3school中有关“HTML布局”一节中实例问题的理解

huhaha24的博客

03-29

284

关于布局的问题，我已经转发过别人写得很好的一篇文章，我自己也写了一篇个人理解的文章，但是今天学习到w3school中有关布局的实例时，又产生了疑问，弄清楚过后想在这里进行发表，好让更多的人更好的理解。 <body> <div id="header"> <h1>City Gallery</h1> </div> <div ..

div覆盖div DIV相互重叠如何解决

qq_33859479的博客

01-10

4426

转载出处：http://www.divcss5.com/rumen/r674.shtml div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。DIVCSS5通过CSS图文案例介绍产生原因与解决方法。DIV与DIV覆盖原因与解决方法。可能您遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能下面内容覆盖掉上面DIV布局，形成DIV...

JavaScript-页面布局-div布局-盒子模型

插件开发

03-27

3940

文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型 div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如

网页Object标签遮盖DIV标签解决方法

09-03

在网页开发过程中，我们经常会遇到各种布局问题，其中之一就是`<Object>`标签遮盖`<div>`标签的情况。`<Object>`标签在HTML中用于嵌入外部资源，如Flash、PDF或其他插件，而`<div>`标签则常用于创建页面上的容器或...

DIV遮挡问题

03-18

这个问题通常发生在多个<div>元素重叠时，一个<div>可能会遮挡住另一个<div>，导致部分内容不可见。解决这个问题需要对HTML结构、CSS选择器、定位方式以及Z轴顺序有深入理解。首先，<div>是HTML中的一种常用容器...

IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题

09-25

不遵循这一标准可能会导致不同的浏览器解析HTML代码的方式不同，进而引发样式和布局问题，如文字重叠。文字重叠通常是由于CSS盒模型的差异、浏览器对某些CSS属性的解析不一致或者HTML结构不规范引起的。在IE8和FF...

DIV border边框显示不完全问题的解决方法

10-30

然而，有时可能会遇到`div`的边框显示不完全或显示异常的问题，这通常是由于浏览器兼容性、浮动元素、内联元素、CSS盒模型等问题导致的。本文将详细探讨这个问题，并提供解决方案。首先，我们分析标题和描述中提到...

使用 React 和 Redux 进行井字游戏并附带源代码.zip

07-24

项目：使用 React 和 Redux 进行井字游戏并附带源代码使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。关于项目井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。要运行此项目，您需要在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、 Mozilla Firefox。演示：该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。

使用 JavaScript 编写的专注力游戏（附源代码）.zip

07-24

项目：JavaScript 中的专注力游戏（附源代码）专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。游戏制作这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。该游戏包含大量的 javascript 以确保游戏正常运行。如何运行该项目？要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。演示：该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。

人脸识别方案资料61EDA-C1590.zip

07-24

人脸识别方案资料61EDA_C1590.zip

316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）

07-24

316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）该设计为DK124控制的开关电源，实现12V 2A输出；功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；

基于Springboot和Vue的生鲜超市管理的设计与实现源码生鲜超市管理的设计与实现代码（优秀毕业设计）

07-24

生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！

使用 ReactJs 编写的简单旅行计划器（附源代码）.zip

07-24

项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。要运行此项目，您需要在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、 Mozilla Firefox。演示：该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。

俄罗斯方块的python代码

07-24

这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。

绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(

07-24

绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(

基于Springboot和Vue的结合疫情情况的婚恋系统源码结合疫情情况的婚恋系统代码（高分毕设）