以上是实现将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 6.7中安装NVIDIA GT730显卡驱动的手记

    主机: Dell OptiPlex 390 MT (i5) 系列: 主机原配独显,型号未知,运转三年半,常有异响,关机之后过一阵再开机,可以解决.最近,风扇的声音实在不正常,重启也无解,判定它挂了.风 ...

  2. cron表达式使用详解

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month ...

  3. hibernate入门实例

    1. 环境配置 1.1 hiberante环境配置 hibernate可实现面向对象的数据存储.hibernate的官网:http://hibernate.org/ 官网上选择hibernate OR ...

  4. ObReferenceObjectByName函数调用WIN7下的解决

    <寒江独钓 Windows内核安全编程>第4章键盘的过滤ctrl2cap代码中,ObReferenceObjectByName函数调用: [1]extern POBJECT_TYPE Io ...

  5. Codeforces Round #380 (Div. 1, Rated, Based on Technocup 2017 - Elimination Round 2)

    http://codeforces.com/contest/737 A: 题目大意: 有n辆车,每辆车有一个价钱ci和油箱容量vi.在x轴上,起点为0,终点为s,中途有k个加油站,坐标分别是pi,到每 ...

  6. 移动端flex布局 微信和UC的兼容性

    请查看以下两个链接 http://www.tuicool.com/articles/Afq6Bzq http://www.sheng00.com/2148.html

  7. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  8. [翻译]PYTHON中如何使用*ARGS和**KWARGS

    [翻译]Python中如何使用*args和**kwargs 函数定义 函数调用 不知道有没有人翻译了,看到了,很短,顺手一翻 原文地址 入口 或者可以叫做,在Python中如何使用可变长参数列表 函数 ...

  9. Redis集群部署

    1.1.1redis简介 Redis 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志 型. Key-Value数据库 1.1.2redis常见使用场景 1.会话缓存(S ...

  10. c++内存对齐

    内存对齐原则: 1.数据成员对齐规则:struct, union的数据成员,第一个数据成员放在offset为0的地方,之后的数据成员的存储起始位置都是放在该数据成员大小的整数倍位置.如在32bit的机 ...