H5中的定位

这次给大家带来H5中的定位，H5中定位的留意事项是什么，下面就是实战案例，一起来看一下。

一.定位流分类

1.1相对定位
1.2绝对定位
1.3牢固定位
1.4静态定位

二.什么是相对定位?

相对定位就是相关于本人之前在标准流中的位置来移动
position: relative;

相对定位留意点

1.相对定位是不离开标准流的, 会连续在标准流中占用一份空间
2.在相对定位中统一个标的目的上的定位属性只能使用一个<a>(也就是使用了left,就不要使用right;使用了top,就不要使用bottom)</a>.
3.由于相对定位是不离开标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
4.由于相对定位是不离开标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设定margin/padding等属性的时会影响到标准流的规划,<a>(margin/padding会加给定位此前的盒子位置)</a>

相对定位利用场景

1.用于对元素停止微调
2.配合后面学习的绝对定位来使用

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位此前的位置上
        }

三. 什么是绝对定位?

绝对定位就是相关于body来定位
position: absolute;

留意点

1绝对定位的元素是离开标准流的
2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

.box2{
            background-color: green;
            position: absolute; //绝对定位
            left: 0;
            bottom: 0; //在body的左下角
        }

四. 绝对定位参照 点

纪律

1.默许状况下所有的绝对定位的元素, 不管有没有祖先元素, 都会以body作为参照 点

2.假如一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的阿谁祖先元素作为参照 点

2.1只如果这个绝对定位元素的祖先元素都可以

2.2指的定位流是指绝对定位/相对定位/牢固定位

2.3定位流中只要静态定位不可

3.假如一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 并且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它比来的阿谁定位流的祖先元素为参照 点

五. 留意点

1.假如一个绝对定位的元素是以body作为参照 点, 那么其实是以网页首屏的宽度和高度作为参照 点, 而不是以整个网页的宽度和高度作为参照 点;

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！

引荐阅读：

网页的规划方式之清除浮动

HTML与CSS的盒子模型

以上就是H5中的定位的具体内容，更多请关注百分百源码网其它相关文章！