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- ...
随机推荐
- 前端面试题2016--CSS
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE 盒子模型.W3C 盒子模型:(2)盒模型:内容(content).填充(padding).边界(margin). ...
- C++语法-指针 (1)
<C++程序设计> 谭浩强 清华大学出版社 2016-08-03 1.P167 一般的C++编译系统为每个指针变量分配4个字节的存储单元,用来存放变量的地址. 2.P169 .cpp文件 ...
- AngularJS学习笔记
一.初识AngularJS:1.Angularjs通过创建实时模板来代替视图,而不是将数据合并进模板后更新DOM,任何一个独立视图组件中的值都是动态替换的. 二.数据绑定和第一个AngularJS W ...
- Oracle手工创建数据库
1,确定数据库全局变量名和实例名 DB_NAME = ORCL SID = ORCL 2,确定数据库管理员的认证方式: 管理员的认证方式包括操作系统认证和口令认证两种,本例采用操作系统认证 3,创建初 ...
- NetworkComms V3 模拟登陆
演示NetworkComms V3的用法 例子很简单 界面如下: 服务器端代码: 开始监听: //服务器开始监听客户端的请求 Connection.StartListening(ConnectionT ...
- whereis 和which
这两个命令用的好,可以很快找出文件的路径 [root@oc3408554812 zip-3.0]# which passwd/usr/bin/passwd[root@oc3408554812 zip- ...
- 总结js中数据类型的bool值及其比较
首先需要知道的是,js中有6个值为false,分别是: 0, '', null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true. 可以使用Bo ...
- Kotlin Groovy Style Builder
fun main(args:Array<String>):Unit{ val x = a{ aa{ +"01.01" +"01.02" } aa{ ...
- php实现递归的三种方式: 遍历文件夹实例
递归函数是我们常用到的一类函数,最基本的特点是函数自身调用自身,但必须在调用自身前有条件判断,否则无限无限调用下去.实现递归函数可以采取什么方式呢?本文列出了三种基本方式.理解其原来需要一定的基础知识 ...
- JavaEE SpringMVC 基础概念（如需详细资料请留言）
SpringMVC Web开发核心思想: 模型与视图相分离: 控制逻辑与业务逻辑相分离: 视图选择与具体视图技术相分离: 非侵入式开发(尽量少使用框架特定API),易于测试. SpringMVC是什么 ...