你们好，最近小活发现有诸多的小伙伴们对于Css定位，css定位这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 为了说明问题，首先我们做一个未经处理的基础网页进行对比，新建一个红色的div和一段文字。具体代码如下：
2、 html
3、 head
4、 标题相对定位和绝对定位/标题
5、 style
6、 .div1{
7、 background-color:red;
8、 height:100px;
9、 width:100px;
10、 }
11、 /style
12、 /head
13、 body
14、 div class='div1'/div
15、 p我爱HTML，我爱CSS/P。
16、 /body
17、 /html
18、 正如你所看到的，在下面的图片中，右下方的文字是红色背景的。
19、 我们可以用相对定位来设置元素的位置，相对位置以块参考点为左上角来设置。这里，我们就用实际例子来说明一下。具体代码如下。
20、 html
21、 head
22、 标题相对定位和绝对定位/标题
23、 style
24、 .div1{
25、 background-color:red;
26、 height:100px;
27、 width:100px;
28、 position:relative;
29、 top:25px;
30、 left:25px;
31、 }
32、 /style
33、 /head
34、 body
35、 div class='div1'/div
36、 p我爱HTML，我爱CSS/P。
37、 /body
38、 /html
39、 如下图，只有我们区块的位置发生了变化，其他都没有变化，所以修改不会影响其他布局。
40、 据说相对位置设置改变了相对于块左上角顶点的上和左，相对顶点右和下的值也可以设置。具体代码如下：
41、 html
42、 head
43、 标题相对定位和绝对定位/标题
44、 style
45、 .div1{
46、 background-color:red;
47、 height:100px;
48、 width:100px;
49、 position:relative;
50、 right:25px;
51、 bottom:25px;
52、 }
53、 /style
54、 /head
55、 body
56、 div class='div1'/div
57、 p我爱HTML，我爱CSS/P。
58、 /body
59、 /html
60、 如下图所示，是否可以看出右下侧相对于方块基点的位置发生了变化，使得方块向左上方移动？
61、 除了相对定位，还有绝对定位。这里，绝对定位用于设置相对于右侧和底部。绝对定位是相对于网页可视化为基准的。具体代码如下：
62、 html
63、 head
64、 标题相对定位和绝对定位/标题
65、 style
66、 .div1{
67、 background-color:red;
68、 height:100px;
69、 width:100px;
70、 position:absolute;
71、 right:25px;
72、 bottom:25px;
73、 }
74、 /style
75、 /head
76、 body
77、 div class='div1'/div
78、 p我爱HTML，我爱CSS/P。
79、 /body
80、 /html
81、 正如您所看到的，执行的效果是图片在网页的最下角相对于右边和底部移动了25个像素。
82、 让我们来谈谈相对于的绝对定位
83、 html
84、 head
85、 标题相对定位和绝对定位/标题
86、 style
87、 .div1{
88、 background-color:red;
89、 height:100px;
90、 width:100px;
91、 position:absolute;
92、 top:25px;
93、 left:25px;
94、 }
95、 /style
96、 /head
97、 body
98、 div class='div1'/div
99、 p我爱HTML，我爱CSS/P。
100、 /body
101、 /html
102、 相对于网页的定位，其他页面的布局不影响也不占用网页的面积。
103、 最后说一下块层的顺序。在这里，我们来谈谈如何设置重叠词来说明效果。具体代码如下：
104、 html
105、 head
106、 Title overlapping word/Title
107、 style
108、 div{
109、 font-size:50px;
110、 font-family:arial black;
111、 }
112、 .div1{
113、 color:red;
114、 position:absolute;
115、 top:20px;
116、 left:20px;
117、 z-index:3;
118、 }
119、 .div2
120、 {
121、 color:blue;
122、 position:absolute;
123、 top:23px;
124、 left:23px;
125、 z-index:2;
126、 }
127、 .div3{
128、 color:#666666;
129、 position:absolute;
130、 top:26px;
131、 left:26px;
132、 z-index:1;
133、 }
134、 /style
135、 /head
136、 body
137、 div class='div1 '我爱HTML，我爱/div
138、 div class='div2 '我爱HTML，我爱/div
139、 div class='div3 '我爱HTML，我爱/div
140、 /body
141、 /html
142、 您可以看到层叠文本的效果，其中Z-index用于调整显示的层数。
以上就是css定位这篇文章的一些介绍，希望对大家有所帮助。