css样式重叠,css两个div重叠

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS如何控制 2个div 的部分重叠在一起并将其中一个div的内容固定显示在上层

重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成

position: absolute; /*设置为绝对定位*/

z-index:999; /*设置重叠的上下次序，值越大月在上方*/示例如下

创建Html元素

div class="top"

div class="b"是绝对定位，并且重叠在上方/div

div class="a"是默认定位/div

/div2

DIV 标签

div 标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div 标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。

div 可定义文档中的分区或节（division/section）。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。

以上内容参考：百度百科-DIV

相关问答

Q1: css布局时，div互相重叠是为什么

在做css+div布局是重叠有很多中情况，我给你分析分析

首先看看一个容器套两个字容器的情况，在我们做布局的时候网页中div之间的关系基本都可以简化到这种关系。

代码如下

!DOCTYPE html

html

head

titleDIV_TEST/title

meta charset="utf-8"/

style type="text/css"

div{border: 1px solid #000;}

#top1{

width: 200px;

}

#top1Sun1{

background-color: aquamarine;

width: 150px;

}

#top1Sun2{

background-color: bisque;

width: 150px;

}

/style

/head

body

div id="top1"

top1

div id="top1Sun1"top1Sun1/div

div id="top1Sun2"top1Sun2/div

/div

/body

/html

下面我们来看一下那种方式可能会产生重叠

1、margin为负数的情况

现在我们将top1Suan2的margin-top设置成-10px

可以看到top1Sun2向上偏移了10个像素，因此这中情况是可能产生重叠的。

2、绝对定位

这个不用解释了，肯定可以产生重叠

3、父容器高度不固定，子容器使用float，看看父容器的兄弟容器会不会产生偏移

不使用float的时候是这样的

代码如下

!DOCTYPE html

html

head

titleDIV_TEST/title

meta charset="utf-8"/

style type="text/css"

div{border: 1px solid #000;}

#top1{

width: 600px;

}

#top1Sun1{

background-color: aquamarine;

width: 150px;

height: 200px;

}

#top1Sun2{

background-color: bisque;

width: 150px;

height: 200px;

margin-top: -10px;

}

#top2{

height: 100px;

background-color: #eee;

}

/style

/head

body

div id="top1"

top1

div id="top1Sun1"top1Sun1/div

div id="top1Sun2"top1Sun2/div

/div

div id="top2"/div

/body

/html

现在让top1Sun1、top1Sun2的float都为left

你会发现，top2容器居然和top1发生了重叠

发生这种情况的原因是因为top1我们没有设置固定高度，当他的两个字容器向左浮动时，top1的高度就不会被他的子容器撑开了，这是我们可以选择两个方法给top1提供高度占位，一种是设置固定高度，还有一种是设置top1的overflow为hidden（这种方式会让父容器高度自适应字容器），现在我们把top1的overflow设置为hidden看下效果

布局达到了我们预想的效果（top1Sun2因为设置了margin-top:-10px所以会往上偏移10像素，多出的部分，因为父容器设置了溢出隐藏，所以看不到了）

Q2: CSS如何将图片叠加到一起？

1、打开vscode，创建一个html页面。

2、在测试页面的同级目录，添加一张演示图片。

3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。

4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。

5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。

6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。

7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。

Q3: .net两个css样式可以重叠吗？

cssclass是对服务器控件应用css

td是没有cssclass属性的啊