css中三种定位详细介绍
2021-07-11 01:06
标签：relative pos body round order css 浏览器 meta 固定 在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法. 定位方式:是指如何确定某个标签在页面中的位置. 1.固定定位:始终相对于浏览器窗口进行定位 2.相对定位:用来对标签的位置进行微调,参照的是标签原来的位置 3.绝对定位:元素的位置相对于最近的已定位祖先元素(relative对象),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块----body 懂得了这三种通过css进行定位的方式,相信以后前台页面标签错乱的问题就会得到很好地解决. css中三种定位详细介绍 标签：relative pos body round order css 浏览器 meta 固定 原文地址：http://www.cnblogs.com/loveless1210/p/7087255.html 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>
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>
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>