<!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>

运行效果图

css10定位属性-LMLPHP

<!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属性的元素无效!
*/
05-11 22:28