以上是实现将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样式——两张图片的位置关系的更多相关文章

  1. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

  2. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  3. div+css样式命名规则，值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  4. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  5. 引入CSS样式表（书写位置）

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  6. Intersecting Lines---poj1269(求两直线的位置关系)

    题目链接:http://poj.org/problem?id=1269 题意:给你两条直线上的任意不同的两点,然后求两条直线的位置关系,如果相交于一点输出该点坐标; #include<iostr ...

  7. Intersecting Lines （计算几何基础+判断两直线的位置关系）

    题目链接:http://poj.org/problem?id=1269 题面: Description We all know that a pair of distinct points on a ...

  8. CSS样式表的书写位置

    行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...

  9. img垂直居中div - css样式

    参考: https://www.jianshu.com/p/f1b570eabe33 html: <div class="showImg" style="text- ...

随机推荐

  1. 使用curl传递cookie错误的问题

    工作中发现一个问题, 通过curl调用接口传递cookie操作用户的数据, 接口的程序解析不了cookie中的数据. 经过排查发现curl发送的cookie数据为 TZ+Gn+rEk+6G4d 而接口 ...

  2. Python【7】-数据分析准备

    一.经常用到的python库: Numpy:Python科学计算的基础包: pandas:提供了能使我们快捷的处理结构化数据的大量数据结构和函数: matplotlib:用于绘制数据图表的python ...

  3. Mysql主数据库+备份数据库部署教程

    转:http://www.111cn.net/database/mysql/76450.htm 本文我们来讲讲Mysql主备如何部署,这里说的主是指Mysql主数据库,备是从数据库,备可以是多个,也可 ...

  4. Web cookie 详解

    总结:服务端客户端变量建议都是用 utf-8字符集, 前后传递的变量都建议使用url编码处理.php setcookie 保存到客户端的变量会自动url编码的, 所以客户端获取后需要decodeURI ...

  5. a链接中套a链接

    <a href="baidu.com"> <div> <div class="title">百度</div> & ...

  6. 国内技术管理人员批阅google的“春运交通图”项目（大公司下的高效率）<转载>

    在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...

  7. Android apk集成

    刚开始学习Android,对很多东西都不懂,所以以下是我做的第一件事,记录一下,也就是apk的集成: 我们集成的apk是已经签过名的第三方apk,并且需要集成到system/priv-app目录下,过 ...

  8. 1476. Lunar Code

    http://acm.timus.ru/problem.aspx?space=1&num=1476 由于前一列对后一列有影响,所以需要保持前一列的状态, 但无需用状态压缩来保存(也保存不了) ...

  9. MYSQL数据库忘记密码

    1.忘记密码解决办法 Windows下的实际操作如下 1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant-tables回车 ...

  10. DLL 导出封装类

    首先使用Wizard创建一个Win32 Dynamic-Link Library工程,然后定义一个简单的C++类CInDLL.由于该类会被工程之外的文件所引用,所以需要对这个类进行引出.因为只有引出后 ...