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- ...
随机推荐
- ArcGIS Add-in插件开发从0到1及实际案例分享
同学做毕设,要求我帮着写个ArcGIS插件,实现功能为:遍历所有图斑,提取相邻图斑的公共边长及其他属性(包括相邻图斑的ID),链接到属性表中.搞定后在这里做个记录.本文分两大部分: ArcGIS插件开 ...
- [转载]SQL Server如何保证可空字段中非空值唯一
原文地址:http://www.cnblogs.com/caspnet/archive/2011/02/23/1962638.html 解决问题是:在一个表里面,有一个允许为空的字段,空是可以重复的, ...
- [css]零散的重构知识
1.不建议这样写 font-family:"微软雅黑"; 建议 font-family:Microsoft YaHei; 因为有些网站不兼容中文(GB2312)的字符
- Mallet 使用说明
Mallet:自然语言处理工具包 发表于128 天前 ⁄ 技术, 科研 ⁄ 评论数 6 ⁄ 被围观 1006 Views+ MALLET是基于java的自然语言处理工具箱,包括分档得分类.句类.主题模 ...
- 在centos环境安装mysql
在Linux上安装mysql数据库,我们可以去其官网上下载mysql数据库的rpm包,http://dev.mysql.com/downloads/mysql/5.6.html#downloads,大 ...
- NodeJs使用asyncAwait两法
async/await使用同步的方式来书写异步代码,将异步调用的难度降低到接近于0,未来必将大放异彩.然而在当下,由于标准化的缓存步伐,async/await尚在ES7的草案中.为了尝先,特试用了下面 ...
- React Native + Nodejs 使用RSA加密登录
想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...
- java中“/0”含义
public class Test { public static void main(String[] args) { // 正常情况下,对这个0,tp中储的是其对应的ASCII码48 char t ...
- Unique Paths II
这题在Unique Paths的基础上增加了一些obstacle的位置,应该说增加的难度不大,但是写的时候对细节的要求多了很多,比如,第一列的初始化会受到之前行的第一列的结果的制约.另外对第一行的初始 ...
- Devexpress Winform Gridcontrol 中根据条件单元格的值改变单元格的颜色等属性。
提供一下三种方法 1.使用设计器 点击gridcontrol控件,run designer,format Condtions, add,然后进行各种条件的设置. 2.用代码代替设计器. 实例代码: p ...