<!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="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属性的元素无效！ */