干货html定位的几种方式

北京看雀斑的医院 http://m.39.net/pf/a_10057623.html

1.html定位的几种方式:

html定位主要分为5种:静态定位、相对定位、绝对定位、固定定位、粘性定位

2.html定位实现的语法:

要想实现html定位需要设置两个选项:定位的类型+定位的位置。其中定位的类型分为上述几种定位的类型:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)、粘性定位(sticky)。

定位的位置主要分为上(top)、下(bottom)、左(left)、右(right)。

.html静态定位

当我们没有指定定位方式的时候,这时默认的定位方式就是static,也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,对left、top、z-index等设置值无效,这种定位不脱离文档流;

4.html相对定位的特点以及应用:

1)相对定位是对于它本身而言进行位置的移动。

①举例:如下图是00x00像素的div盒子

②假如我们将div这个盒子设置了相对定位如下:

③我们可以通过下图看到,这个div盒子就相对于它本身向下偏移了10像素

2)需要注意的是,相对定位虽然发生了位置移动但是仍旧保留原来的位置,其他元素不能占据他原先位置,如下图;




转载请注明:http://www.aierlanlan.com/cyrz/3759.html