css10定位属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定位属性</title>
<style type="text/css">
/*
position
01.relative:相对定位，相对于自身原来的位置
02.absolute：绝对定位，相当于父级
03.fixed : 固定定位 相对于浏览器
04.static ：默认值
*/
img{
position: fixed; /*固定定位*/
left: 50px;
top: 20px;
}
#a{
position: absolute; /*绝对定位*/
top: 20px;
height: 50px;
width: 50px;
background-color: blue;
}
#b{
height: 50px;
width: 50px;
background-color: deeppink;
}
#c{
position: relative; /*相对定位*/
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body> <div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<img src="data:image/cat.jpg" width="50px" height="50px">
</body>
</html>
运行效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
/*
position属性：
static：默认值，没有定位！
relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
设置相对定位的盒子，原本的位置会被留下来！
*/
#father{
border: 1px solid red;
}
#first{
border: 1px dashed orange;
background-color:orange ;
position: relative;
/*top: 20px;
left: 20px;*/
}
#second{
border: 1px dashed pink;
background-color:pink ;
position: relative;
float: right;
}
#third{
border: 1px dashed yellowgreen;
background-color:yellowgreen ;
position: relative;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第1个盒子</div>
<div id="second">第2个盒子</div>
<div id="third">第3个盒子</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>花样连接</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
a{
display: block;
height: 80px;
width: 80px;
background-color:pink ;
text-decoration: none;
text-align: center;
line-height: 80px;
}
#a2,#a4{
position: relative;
left:180px;
top: -80px;
}
#a5{
position: relative;
left:90px ;
top: -240px;
}
a:hover{
background: blue;
text-decoration: underline;
color: deeppink;
} </style>
</head>
<body>
<div id="box">
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
</div>
</body>
</html>
/*
position属性：
static：默认值，没有定位！
relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
设置相对定位的盒子，原本的位置会被留下来！
absolute:绝对定位：相对于离当前元素最近的一个已经定位的父级元素为基准！
如果父级元素没有设置定位属性，则以浏览器为准！
元素的位置发生变化之后，脱离了标准的文档流！它原来的位置不会保留！
fixed: 固定定位！ 相对于浏览器的！
z-index: 设置层叠！ 数值越大，离我们越近！ 对于没有设置position属性的元素无效！
*/
css10定位属性的更多相关文章
- HTML的定位属性
position 用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) top层距离顶点纵坐标的距离 left层距离顶点横坐标的距 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS属性：定位属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- Css3 笔记 动画 和定位属性
transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...
- 定位属性position
定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...
- H5 36-背景定位属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS（八）：定位属性
一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTY ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- CSS定位属性
定位属性 position属性 1. s ...
随机推荐
- META http-equiv 大全
META http-equiv 大全 HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有: 1.Content ...
- connect network is unreachable 解决办法
详细教程见:http://blog.csdn.net/liukun321/article/details/6662950 1.虚拟机中的centos系统要连接外网,我们需要使用桥接网络 2.正常配置e ...
- Java学习----构造方法的重载
一个类中有多个同名的参数不一样(参数的个数,参数的类型,参数的顺序)的构造方法 public class Student { public Student() { System.out.println ...
- Oracle开启归档
#查看数据库是否为归档模式select name ,log_mode from v$database; #改变归档模式到非归档模式shutdown normal/immediate; #关闭数据库st ...
- 利用花生壳在自己电脑上建立外网可访问的svn
下载花生壳并注册账号 2.花生壳会送你一个免费的二级域名 3.登陆到路由器界面192.168.0.1或者192.168.0.0进入动态dns选项输入你的花生壳账号密码 4.在路由器设置界面设置转发规则 ...
- C51指针的使用
指针就是指变量或数据所在的存储区地址.如一个字符型的变量 STR 存放在内存单元DATA 区的 51H 这个地址中,那么 DATA 区的 51H 地址就是变量 STR 的指针.在 C 语言中指针是一个 ...
- 自己动手做 UEStudio/UltraEdit 的语法高亮文件 (*.uew)
自己一直比较习惯用 UEStudio 来编写 C/C++ 文件,因为 Visual Studio 2010 实在太大了,我的 T400 都跑的费劲,所以一般我只用它来编译和调试.但是可惜的是 UESt ...
- Visual Studio如何删除多余的空行
原文:Visual Studio如何删除多余的空行 如何在Visual Studio中删除多余的空格: 适用于:Visual Studio2008 &2010 1. Ctrl + ...
- 使用 Maven 部署 artifact 到 Nexus 教程
本文侧重讲解如何将已经按照好的 Maven 和 Nexus 连接,即如何通过 Maven 部署 artifact 到 Nexus. 本文前提: 1. 安装好 Maven.可以使用 Maven 创建.打 ...
- Unity中OnGUI绘制贪吃蛇
Square.cs : public class Square : MonoBehaviour { public int row, col; public Rect rect; public Text ...