div CSS样式——两张图片的位置关系
以上是实现将logo图片按照相对位置覆盖在另一张图片上的代码。
通过学习，我学到了以下方法：
将第二张图片定位到第一张图片上。
下面是简单的实现：(假设图都是100*100的)
<style>
* {margin:0;padding:0}
div {position:relative;width:500px; heigth:500px; background:#ccc;}
img {display:block;}
//第一种
#img2 {position:absolute; top:0px; left:0px;}//绝对定位，脱离文档流，这样就可以让第二张图片覆盖到第一张上了。
//第二种
#img1 {position:absolute; top:0px; left:0px;z-index:1;}
#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式，是样第二张的层级高出第一张，这样也可以实现题目要求。
</style>
<body>
<div>
<img src='1.jpg' id='img1' />
<img src='2.jpg' id='img2' />
</div>
</body>
div CSS样式——两张图片的位置关系的更多相关文章
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
- div+css样式命名规则，值得收藏
div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- 引入CSS样式表（书写位置）
CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...
- Intersecting Lines---poj1269(求两直线的位置关系)
题目链接:http://poj.org/problem?id=1269 题意:给你两条直线上的任意不同的两点,然后求两条直线的位置关系,如果相交于一点输出该点坐标; #include<iostr ...
- Intersecting Lines （计算几何基础+判断两直线的位置关系）
题目链接:http://poj.org/problem?id=1269 题面: Description We all know that a pair of distinct points on a ...
- CSS样式表的书写位置
行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...
- img垂直居中div - css样式
参考: https://www.jianshu.com/p/f1b570eabe33 html: <div class="showImg" style="text- ...
随机推荐
- Mongodb 副本集分片（一）---初始化mongodb安装启动
写在前面:mongodb是nosql非关系型数据库中,比较受欢迎的产品.在数据持久化及与关系型数据库的关联上也做的比较好,目前各大公司在存放二进制文件(图片.视频等)中应用也比较广泛.其遵循的key- ...
- ExtJs 之 ComboBox级联使用
刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API.网络资料,终于解决了. 先列出遇到的一系列问题(也许你也遇到过! ...
- [整]磁盘 I/O 性能监控指标和调优方法
在介绍磁盘 I/O 监控命令前,我们需要了解磁盘 I/O 性能监控的指标,以及每个指标的所揭示的磁盘某方面的性能. 磁盘 I/O 性能监控的指标主要包括: 指标 1:每秒 I/O 数(IOPS 或 t ...
- function,new function,Function,new Function 之间的区别
测试一: var fud01 = function() { var temp = 100; this.temp = 200; return temp + this.temp; } alert(typ ...
- ios项目中安装和使用CocoaPods
CocoaPods是什么? http://code4app.com/article/cocoapods-install-usage http://blog.csdn.net/jjmm2009/arti ...
- .NET 3.5 安装错误的四个原因及解决方法
.net framework 3.5 安装错误的四个常见原因及解决方法,飓风软件站整理,转载请注明. 1.清除所有版本 .NET Framework 安装错误后在系统中遗留的文件: 如果您以往安装过 ...
- windows本地script脚本恶意代码分析（带注释）
//经过样本分析和抓取,该恶意程序是款下载者木马. //不懂的可以百度百科. http://baike.baidu.com/link?url=0dNqFM8QIjEQhD71ofElH0wHGktIQ ...
- STM32外部中断初理解
PA0,PB0...PG0--->EXTI0 PA1,PB1...PG1--->EXTI1 ....... PA15,PB15...PG15--->EXTI15 以上为GPIO和中断 ...
- 【译】Permissions Best Practices Android M权限最佳做法
Permissions Best Practices PreviousNext In this document Consider Using an Intent Don't Overwhelm th ...
- 使用BCrypt算法加密存储登录密码用法及好处
//导入import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; /** *使用BCrypt算法加密存储登录密码 ...