webbasic之相对定位绝对定位固定定位
Posted 野生猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webbasic之相对定位绝对定位固定定位相关的知识，希望对你有一定的参考价值。
1.相对定位
-以自己为目标
-较小的偏移
-不脱离队伍（流）//位置不会释放
position：relative
left:值
right:值
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>照片墙</title>
<style>
/*先刷墙*/
body{
background-color:#088;
}
/*再摆照片*/
ul{
width:780px;
margin:20px auto;
border:1px solid red;
/*去掉符号*/
list-style-type:none;
}
li{
width:218px;
padding:10px;
margin:10px;
border:1px solid #ccc;
float:left; //左浮动保证图片正序排列
background-color:#fff;
}
p{
text-align:center;
}
/*使用相对定位实现照片抖动的效果*/
li:hover{
position:relative;
left:2px;//以li左边界为基准，向右偏移2个像素
top:-2px;//以li上边界为基准，向上偏移2个像素
}
</style>
</head>
<body>
<ul>
<li>
<img src="../images/01.jpg"/>
<p>轻轻地我走了</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>正如我轻轻地来</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>我轻轻地招手</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>作别西天的云彩</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>那河畔的青柳</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>是夕阳中的新娘</p>
</li>
</ul>
</body>
</html>
2.绝对定位
-以父辈为目标
带有position的父辈，如果没有position，则以body为目标，如果多个父辈带position
以最近的父辈为目标
-较大的偏移
-脱离流（队伍）//位置会释放
position：absolute
left：值
top: 值
绝对定位实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>新闻图片</title>
<style>
div{
border:1px solid red;
width:390px;
height:258px;
/*设置定位属性，为了子元素以该div为目标做绝对定位*/
position:relative;
}
/*绝对定位*/
p{
position:absolute;
top:0;
left:0;
margin:0;
width:100%;
text-align:center;
line-height:30px;
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<img src="../images/2.jpg"/>
<p>小李子终获小金人</p>
</div>
</body>
</html>
3.固定定位
-以窗口为目标
-巨大的偏移
-脱离流（队伍）
-永远挂在窗口上，无论如何滚动，都在那
position：fixed
left：值
right：值
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
<style>
div{
width:50px;
line-height:30px;
text-align:center;
background-color:#ccc;
/*固定定位*/
position:fixed;
bottom:10px;//以窗口的底边为基准，向上偏移10个像素
right:5px;//以窗口的右边为基准，向左偏移5个像素
}
</style>
</head>
<body>
<div>
<a href="#">TOP</a>//浏览器窗体顶部的锚点没有name
</div>
<h1>iphone SE</h1>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p>它和5S一样大</p>
<p></p>
</body>
</html>
以上是关于webbasic之相对定位绝对定位固定定位的主要内容，如果未能解决你的问题，请参考以下文章
网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？