css中三种定位详细介绍

75 阅读 0 评论 50 点赞

我是靠谱客的博主健忘小甜瓜，最近开发中收集的这篇文章主要介绍css中三种定位详细介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法.

定位方式:是指如何确定某个标签在页面中的位置.

1.固定定位:始终相对于浏览器窗口进行定位

 1 <html>
 2 <head>
 3
<title>定位方式-固定定位</title>
 4
<meta charset="utf-8">
 5
<style type="text/css">
 6 
body{
 7 
height: 2000px;
 8
}
 9 
div{
10 
width: 500px;
11 
height: 300px;
12 
border:solid 2px red;
13 
position: fixed;/*设置定位方式为固定定位*/
14 
bottom:500px 1px ;
15
}
16 
p{
17 
float: right;
18
}
19
20
</style>
21 </head>
22 <body>
23
<div>这是一个div盒子</div><br>
24
<p>这个不会动</p>
25 </body>
26 </html>

2.相对定位:用来对标签的位置进行微调,参照的是标签原来的位置

 1 <html>
 2 <head>
 3
<title>定位方式-相对定位</title>
 4
<meta charset="utf-8">
 5
<style type="text/css">
 6 
body{
 7 
height: 2000px;
 8
}
 9 
#span2{
10 
position: relative;/*设置定位方式为相对定位*/
11 
top: 20px;
12 
left: 14px;
13
}
14
</style>
15 </head>
16 <body>
17
<span id="span1">这是一个</span>
18
<span id="span2">这是一个</span>
19
<span id="span3">这是一个</span>
20 </body>
21 </html>

3.绝对定位:元素的位置相对于最近的已定位祖先元素(relative对象),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块----body

 1 <head>
 2
<title>定位方式-绝对定位</title>
 3
<meta charset="utf-8">
 4
<style type="text/css">
 5 
div{
 6 
width: 500px;
 7 
height: 400px;
 8 
border: solid 2px red;
 9
/*给div设置相对定位，使得div作为section的参照物进行绝对定位*/
10 
position: relative;
11
}
12 
section{
13 
width: 50px;
14 
height: 40px;
15 
background-color: yellow;
16 
position: absolute;/*设置定位方式为绝对定位*/
17
/*让section始终在div右下角*/
18
/*让section相对在div右侧距离为0*/
19
/*让section相对在div低侧距离为0*/
20
/*绝对定位必须设置参照物，若未设置参照物，则相对于body进行定位*/
21 
right: 0px;
22 
bottom: 0px;
23
}
24
25
</style>
26 </head>
27 <body>
28
<div>
29
<section></section>
30
</div>
31 </body>