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