关于上部盒子里有图片下面盒子magin-top负值的层级问题

.box{
width: 800px;
box-sizing: border-box;
margin: 50px auto 0;
background: pink;
}
.imgBox{
width: 80%;
height: 500px;
margin: 0 auto;
background: green;
}
.imgBoximg{
display: block;
width: 100%;
height: auto;
height: 500px;
}
.boxc{
width: 100%;
height: 300px;
background: #c00;
margin-top: -100px;
position: relative;
加入这行样式即可调整下面盒子的层级
}
<div class="box">
<div class="imgBox"> <img class="imgBoximg" src="img/plt1.png" alt="" />
</div>
<div class="boxc"></div>
</div>
关于上部盒子里有图片下面盒子magin-top负值的层级问题的更多相关文章
- jsDOM编程-小球在盒子里来回撞击
首先写一个小页面:页面需要一个div 这个div就是盒子,然后在div里在包含一个子div 这个子div就包含一张小球的图片 代码: <!doctype html> <html> ...
- 滑动门出现的背景---实例微信导航栏(a盒子里面包span盒子,文字写在span里)
需求: 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,其中最大的问题是字数不同,如何做? 解决: 用一个a包含span来制作,字数放在span里面. ...
- r个有标志的球放进n个不同的盒子里,要求无一空盒,问有多少种不同的分配方案?
由题意可知道r>=n,我原来想的是先取n个全排列,剩下的r-n个每个有n中选择,所以结果是n!*n^(r-n).经满神猜测,这样是会重复的.比如说,1到5个球,ABC三个盒子,ms ...
- 不要困在自己建造的盒子里——写给.NET程序员(附精彩评论)
此文章的主旨是希望过于专注.NET程序员在做好工作.写好.NET程序的同时,能分拨出一点时间接触一下.NET之外的东西(例如10%-20%的时间),而不是鼓动大家什么都去学最后什么都学不精,更不是说. ...
- 今盒子里有n个小球,A、B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个
/* 题目描述 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球 ...
- 怎么样子盒子能撑起父盒子?浮动,BFC,边距重叠
怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...
- 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。
使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 让dwz 在td里显示图片
让dwz 在td里显示图片 <!@{foreach from = $list item = element}@> <tr target="gid" rel=&qu ...
随机推荐
- VMware中centos虚拟机的安装
几个月前,就下载了VMware,centOS 6 操作系统镜像.苦于对linux的不理解和安装教程的不熟悉,一直未安装成功. 几天前,终于独自安装好了,特此记录一下. 安装其实很简单,之前失败是在于安 ...
- vue中打包之后的dist文件不放在服务器的根目录下
在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行 ...
- [转帖]开始使用Chronograf
地址:https://docs.influxdata.com/chronograf/v1.6/introduction/getting-started/ https://www.cnblogs.com ...
- LINK : fatal error LNK1104: cannot open file的解决方法
结果是编译时通过了,但连接(F7)时却显示: LINK : fatal error LNK1104: cannot open file“Debug/1.exe” ============== 上一次运 ...
- 2019CSP-S游记
\(2019CSP-S\)游记 \(Day : -26\) 初赛退役失败,准备复赛了... \(Day:0\) 早上\(7:30\)出发坐车去杭州,车上一直在听歌和睡觉中度过(话说锦零的歌真好听).. ...
- Go语言Mac、Linux、Windows 下交叉编译
在很多时候,由于开发的方便,会有这样的场景出现,使用Mac开发或使用Windows开发,需要编译成Linux系统的执行文件,那么如何做到?Go语言提供了非常方便的命令行操作,即可实现. 1.Mac下编 ...
- 单档——PK单号新增、修改时不允许编辑,PK单号自动生成
由系统自动生成单号(日期+流水),用户新增.修改时不允许编辑单号: 范例(cxmt631): 1)在#单头栏位开启设定#中,即 cxmt631_set_entry(p_cmd)下: #add-poin ...
- Windows authentication for WCF web services error
WCF Web服务的Windows身份验证在部署到IIS时,默认网站添加应用程序的方式.浏览运行.svc文件报错. 错误代码: The authentication schemes configure ...
- 21-Perl 发送邮件
1.Perl 发送邮件如果你的程序在 Linux/Unix 系统上运行,你就可以在 Perl 中使用 sendmail 工具来发送邮件.以下是一个简单的脚本实例用于发送邮件:#!/usr/bin/pe ...
- java字符串大小写转换
String test="SHA34cccddee"; System.out.println(test.toUpperCase());//小写转大写 String test= ...