CSS中Position4个特性的应用详细介绍

2021-01-20 10:35 jianzhan
英语的语法:

position:static | relative | absolute | fixed

赋值:

static:默认设置值,无独特精准定位,目标遵照一切正常文本文档流。top,right,bottom,left等特性不容易被运用,默认设置值。
relative:相对性精准定位,目标遵照一切正常文本文档流,但将根据top,right,bottom,left等特性在一切正常文本文档流中偏位部位。
absolute:肯定精准定位,目标摆脱一切正常文本文档流,应用top,right,bottom,left等特性开展肯定精准定位。而其堆叠根据z-index特性界定。
fixed:固定不动精准定位,目标摆脱一切正常文本文档流,应用top,right,bottom,left等特性以对话框为参照点开展精准定位,当出現翻转条时,目标不容易伴随着翻转。

4个特性的详尽详细介绍:

static,默认设置值

说到这里大家迫不得已提1下1个界定——文本文档流,许多书对文本文档流这个定义只是1笔带过,沒有详尽解答,但我依据自身的工作经验和了解对它开展了总结,文本文档流实际上便是文本文档的輸出次序,也便是大家一般看到的由左到右、由上而下的輸出方式,在网页页面中每一个元素全是依照这个次序开展排列和显示信息的,而float和position两个特性能够将元素从文本文档流摆脱出来显示信息。

默认设置值便是让元素再次依照文本文档流显示信息,不作担任何更改。

relative,相对性精准定位

部位特性被设定为relative以后,是相对前面的器皿精准定位的。这个情况下不可以用top left在精准定位。应当用margin。它能够随对话框尺寸转变。但尺寸依然不容易变。如果你设定成width:100%;height:100%;这样就会伴随着对话框增大缩小。

例如:<div class="1"></div><div class="2"></div>

当1固定不动了部位。1的款式 float:left;width:100px; height:800px;
2的款式为 float:left; position:relative;margin-left:20px;width:50px;
2的部位在1的右侧,间距120px.

absolute,肯定精准定位

部位被设定为absolute后,被设定的元素会被界定到包括它的元素内的特定座标(X座标、Y座标)。

例如:position:absolute;left:20px;top:80px; 这个器皿自始至终坐落于间距访问器左20px,间距访问器上80px的这个部位。它不容易伴随着对话框尺寸转变,只是固定不动在1个特殊的座标轴上面;

固定不动部位,fixed

在基础理论上,被设定为fixed的元素会被精准定位于访问器对话框的1个特定座标,无论对话框是不是翻转,它都会固定不动在这个部位。可是现阶段它在IE6中不被适用,仅有IE7和Firefox访问器能够鉴别