关于上部盒子里有图片下面盒子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 ...
随机推荐
- visio给任意图形进行填充
使用visio给图形填充颜色的条件:图形必须是封闭的!!! 但是很多人不明白:我明明画的图形是封闭的啊!可是无法填充颜色!这是因为,你画了一个看上去是封闭的图形,但是VISIO认为你画的不是封闭图形! ...
- Centos7源码安装Apache和PHP
源码安装Apache 安装需要的依赖 yum -y install gcc autoconf automake make pcre pcre-devel openssl openssl-devel# ...
- [图像分割] OpenCV 的 GrabCut 函数使用和源码解读
转自 zouxy09 GrabCut 原理参考这里,以下为 GrabCut 源码: ——看别人写的好的代码也很享受,干净利落,有些处理的细节也学习一下. /*M//////////////////// ...
- ubuntu 设置静态ip,但显示scope global secondary ens33
设置静态ip 修改 /etc/network/interfaces 文件 # The loopback network interface auto lo iface lo inet loopback ...
- 【LOJ】#3042. 「ZJOI2019」麻将
LOJ#3042. 「ZJOI2019」麻将 如何判定一个集合牌有没有胡的子集是不是胡的 就用一个\(dp[j][k][0/1]\)表示有j个连续两个的串,有k个连续1个串,有没有对子,再记一下这个集 ...
- 使用Minikube运行一个本地单节点Kubernetes集群
使用Minikube是运行Kubernetes集群最简单.最快捷的途径,Minikube是一个构建单节点集群的工具,对于测试Kubernetes和本地开发应用都非常有用. ⒈安装Minikube Mi ...
- Boot-crm管理系统开发教程(总结)
这个Boot-crm管理系统我花了大概两周写完,因为是刚学完SSM框架,所以立马开始了这个项目,项目初期,运行书本上给的前端代码都报了许多错误,导致这个原因是因为书本给的 设计说明文档 没有看清楚.然 ...
- tomcat日志报Invalid message received with signature的解决办法
这位大神说的是正解,大家可以参考一下这个链接:https://blog.csdn.net/bugdongwenlong/article/details/84261424
- docker_nginx_php_mysql
https://blog.csdn.net/miwumuge/article/details/83386679 问题 1.容器内访问宿主机地址, host.docker.internal
- div布局(持续更新)
1. 效果: 代码: <!DOCTYPE html> <html> <head> <meta name="viewport" conten ...