css定位布局_css定位
来源：互联网
时间2023-04-25 02:39:53
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定位这篇文章的一些介绍，希望对大家有所帮助。
