关于上部盒子里有图片下面盒子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 ...
随机推荐
- SpringMVC 零配置 无web.xml
对SpringMVC启动流程的讲解 https://www.cnblogs.com/beiyan/p/5942741.html 与SpringMVC的整合 https://hanqunfeng.ite ...
- 阅读《C Primer Plus》收获
190927 知识内容: 1.了解到C语言混乱代码大赛.评选谁的程序最有创意但又让人难以理解 2.了解最初的c语言的规则,所有编译器依照规则而设计. 3.编程前先要确定好目标对象,并且在纸上大概写出流 ...
- Linux:shift 命令可以将参数依次向左移动一个位置
在脚本中,命令行参数可以依据其在命令行中的位置来访问.第一个参数是 $1 ,第二个参数 是 $2 ,以此类推. 下面的语句可以显示出前3个命令行参数: echo $1 $2 $3 更为常见的处理方式是 ...
- SQLite基础-8.子句(二)
目录 SQLite子句(二) 1. GROUP BY子句 2. HAVING子句 3. LIMIT 子句 4. IF EXISTS 和 IF NOT EXISTS 子句 SQLite子句(二) 1. ...
- SQLite基础-6.运算符
目录 SQLite 运算符 1. 运算符 2. 算数运算符 3. 比较运算符 4. 逻辑运算符 SQLite 运算符 1. 运算符 首先,问大家运算符是什么?运算符在很多领域均用使用.它也分很多中,常 ...
- 数据检索grep
linux操作中,总是会输出很多的内容.但是有些内容并不是我们重点关注的,所以为了看起来方便,也为了提升效率,就将不需要的内容过滤掉. 只输出想要的东西. grep: 用于搜索 模式参数(给定的字符 ...
- AMD平台如何使用Android Studio官方的高性能模拟器
当我第一次接触Android Studio的时候,脑子里第一个想法是:tm不就是IDEA么??以为自己会用的贼六,结果其他小朋友的模拟器都打开了,才发现自己运行不了模拟器.一度以为是我哪里操作错了.于 ...
- 如何使用加多宝(jdb)在linux下调试Java程序
毕业时写了一段时间的C,那时候调试使用gdb,后来转了java,当时就想java程序怎么调试,找了一下,果然,那就是jdk自带的jdb windows里是这样的 Linux下是这样的 一般我在linu ...
- Codeforces 1237B. Balanced Tunnel
传送门 这一题有点意思 首先预处理出 $pos[x]$ 表示编号 $x$ 的车是第几个出隧道的 然后按进入隧道的顺序枚举每辆车 $x$ 考虑有哪些车比 $x$ 晚进入隧道却比 $x$ 早出隧道 显然是 ...
- 用winform实现一个B/S代码更新打包工具
一个.net程序员必须拥有的能力就是可以随时随地写出一个自己需要的小工具,于是记录一下我的个人工具吧. 新建一个窗体应用项目,代码如下: namespace 打包工具 { partial class ...