以上是实现将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. CentOS_7.2安装Nginx_1.9

    一.安装依赖包和开发工具: yum install vim vim-enhanced wget zip unzip telnet ntsysv compat* apr* nasm* gcc gcc* ...

  2. 从.NET平台调用Win32 API

    MSDN文章<Microsoft Win32 to Microsoft .NET Framework API Map> 介绍了.net 类库对win32的封装 从.NET平台调用Win32 ...

  3. Eclipse中10个最有用的快捷键组合

    Eclipse中10个最有用的快捷键组合 (转) 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. ...

  4. IE下new Date不支持传参数的解决

    在FF gloogle浏览器中 用js实例化Date对象时 各种参数都可以换传啊. var date = new Date("2014-10-1 10:24:31"); var d ...

  5. PHP基础教程-54课-问题

    question: $arr = array(1,2,3,4); /*如何通过foreach 将数组变成 $arr = arry(2,4,6,8) */ 起初用: $arr = array(1,2,3 ...

  6. win7 64 位 tomcat 定时重启脚本

    添加进任务计划即可 net stop "scm"                                           [停止服务] rd /s /q D:\tomc ...

  7. RHEL6.6 PXE安装-基于VMWare WorkStation

    ///////////第一部分:安装安装服务器 1.先安装一台RHEL6.6的服务器A(地址为192.168.139.132),作为安装服务器.这样后面的机器就可以指向这台服务器进行自动安装 2.在A ...

  8. linux 内核邮件列表

    第一节 - 一般性问题 1. 为什么有些时候使用“GNU/Linux"而另一些时候使用“Linux”? 答:在这个FAQ中,我们尝试使用“linux”或者“linux kernel”来表示内 ...

  9. Tomcat批处理文件小结

    Tomcat批处理文件小结 一:嗯,如果你不了解Windows批处理文件,并且想了解一下,请先参看下面的链接资源(我也是因为想了解一下Windows批处理文件是用什么写的?怎么写的?才在园中找的,下面 ...

  10. 在gridControl的单元格中的多行文本

    我们知道,gridcontrol里面的单元格默认是不能换行的,但是有时候我们需要显示要换行的文本,应该怎么处理呢?这里提供一个方案: 假设我有一个列”合同文本“(colContractText),我要 ...