以上是实现将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. vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...

  2. scala getter and setter

    package exp { object Main { def main(args: Array[String]): Unit = { B.name ="Fred"; printl ...

  3. 记一次酷派尚锋Y75刷机

    昨天因为手机卡的原因,我的同学帮他的同学刷机,听他说是用刷机精灵线刷的rom包,但是刷机失败了,就来找我把弄好,他是个半吊子水平,刚接触这个东西,也是运气不好,什么刷机失败的问题都让他遇上了,刷了几个 ...

  4. spark发行版笔记13

    本期概览: ReceiverTracker架构设计 消息循环系统 ReceiverTracker具体的实现 Spark Streaming作为Spark Core基础 架构之上的一个应用程序,其中的R ...

  5. 禁止浏览.htaccess文件

    很多黑客会攻击和利用.htaccess做网站跳转,所以保护好.htaccess文件尤为重要. 在apache的httpd.conf的配置文件中 默认是已经设置了禁止对.htaccess的访问,截取相关 ...

  6. spider_getModelInformation

    import urllibimport urllib2import re class Spider:def getPage(self,pageIndex): url="http://mm.t ...

  7. Redis设计与实现（一~五整合版）【搬运】

    Redis设计与实现(一~五整合版) by @飘过的小牛 一 前言 项目中用到了redis,但用到的都是最最基本的功能,比如简单的slave机制,数据结构只使用了字符串.但是一直听说redis是一个很 ...

  8. BSS段 data段 text段 堆heap 和 栈stack

    BSS段:BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配.   数 ...

  9. alert弹层无法取消问题解决办法

    最近做H5移动端开发的时候,js代码写了个alert,在Android手机上能正常运行,但是在IOS上运行弹出之后却无法取消掉, 而且页面卡死,点不了任何东西,这种情况是非常不好的,用户体验非常糟糕. ...

  10. range()和xrange()

    range(): range([start,] stop[, step]) 如: range(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] range()默认起始点为0 且ra ...