网页布局中position定位讲解
定位（position）属性有4个属性值，分别是static、relative、absolute、fixed。本文重点讲解relative（相对定位）和absolute（绝对定位）。
东西/材料
Adobe Dreamweaver CS5
操作方式
-
01
相对定位(relative)长短常轻易把握的概念，通俗一点就是正常的块级定位，只不外块级的位置是经由过程top、left、right、bottom属性来进行划定。不外，本来所占用的空间并没有消逝。起首先来正常的定位，如下图。
-
02
然后在正常定位的里面，操纵position：relative来相对定位，relative属性值的父元素就是上图块元素，如下图。
-
03
绝对定位(absolute)第一个特征就是会从文档流中离开，不占有任何空间。它的定位属性也是跟相对定位一样，经由过程top、left、right、bottom来进行划定，如下图。
-
04
一个父元素里面包含多几个绝对定位，若是绝对定位元素重叠在一路，如下图，A和B重叠在一路了，需要A在前面B在后面，我们只需要在A里面添加z-index来节制。
，我们可以操纵z-index来节制哪个在前，哪个在后，如下图。 -
05
可是必然要切忌，如若属性值为absolute，那么必然要共同relative为父元素的块来利用。若是没有共同，如下图。会直接以body为父元素。
-
06
静态定位(static)一般不利用，它的属性值界说为没有定位，元素呈现在正常的流中。忽略top, bottom, left, right，如下图。
-
07
固心猿意马定位（fixed）属性值的界说为浏览器窗口进行定位。通俗一点就是父元素为body，经由过程top, bottom, left, right来节制位置。如下图定位在relative里面，然而并没有用果。
- End
出格提醒
- 发表于 2018-03-08 00:00
- 阅读 ( 612 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章