<!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定位属性的更多相关文章

  1. HTML的定位属性

    position    用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) top层距离顶点纵坐标的距离 left层距离顶点横坐标的距 ...

  2. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  3. CSS属性:定位属性(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  4. Css3 笔记 动画 和定位属性

    transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...

  5. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...

  6. H5 36-背景定位属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS(八):定位属性

    一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTY ...

  8. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  9. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

随机推荐

  1. Best Time to Buy and Sell sock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  2. C++ Primer 5th 第10章 泛型算法

    练习10.1:头文件algorithm中定义了一个名为count的函数,它类似find,接受一对迭代器和一个值作为参数.count返回给定值在序列中出现的次数.编写程序,读取int序列存入vector ...

  3. Java简介(3)-基本语法

    1.大小写敏感 2.类名 3.方法名. 4.源文件名

  4. ThinkPHP 使用极光推送给ios推送消息

    HTML <div id="wrap"><a href="<{:U('Push/pushData')}>">推送</a ...

  5. 基于memcached中命令分析函数tokenize_command改造的split函数

    今天使用C重构php代码,需要手写一个split函数,于是就模仿memcached中获取用户命令的函数 static size_t tokenize_command(char *command, to ...

  6. 使用UIImagePickerController时3DTouch引起的Crash问题的解决--备用

    一.crash的场景 程序中用到UIImagePickerController时,如果在IPhone6S上运行APP,当forceTouch 一个图片时程序会crash,并附带如下crash mess ...

  7. 业内人士详述SIEM建设的演进过程

    http://www.verydemo.com/demo_c289_i22006.html 4A http://www.verydemo.com/demo_c281_i40888.html 从SIEM ...

  8. listView中setOnItemClickListener和getSelectedItemPosition()取不到position问题

    //也可以采用通过listview 索引 取得 item 可以转化到 cursor ,pos 是在listview 的选中事件中赋值. //Cursor v2 = (Cursor) listView. ...

  9. uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)

    一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs  mai ...

  10. UVa 11729 - Commando War(贪心)

    "Waiting for orders we held in the wood, word from the front never came By evening the sound of ...