定位=定位模式+边偏移;
定位模式分为:静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。
变偏移有:top、bottom、left、right。
静态定位(static):元素的默认定位方式,无定位的意思。没有边偏移,静态定位几乎不用。
相对定位(relative):元素相对于它原来在标准流中的位置来说;原来在标准流中的区域继续占有,后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute):元素以带有定位的父级元素来移动位置(依据最近的已经定位的祖先进行定位),而且不保留原来的位置,完全是脱标的。
如果父级没有定位,绝对定位的子盒子以我们文档(浏览器)为准。
如果父级有定位,绝对定位的盒子以父级为准移动位置。
口诀:子绝父相:子元素绝对定位,父元素相对定位。
绝对定位无法用margin:0 auto;居中对齐,为了能够居中对齐,有以下步骤:
1.left:50%;让盒子的左侧移动到父级元素的水平中心位置;
2.margin-left:-盒子的一半px;让盒子向左移动自身宽度的一半(注意是负值)。
固定定位(fixed):绝对定位的一种特殊形式;完全脱标,完全不占位置;只认浏览器的可视窗口,由浏览器窗口+边偏移属性来设置元素的位置。
和父元素没有关系,且不随滚动条滚动。
堆叠顺序(z-index)
z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
定位position
最新推荐文章于 2022-08-01 10:46:00 发布