css中position特性(absolute

日期:2020-11-02 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

大家先看来看CSS3 Api中对position特性的有关界定:

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

如何,是否還是很迷糊~~ 没事儿,下面就从几个基本定义11给大伙儿详细描述:

甚么是文本文档流?

      将窗体自上而下分为1行行, 并在每行中按从左至右的次序排放元素,即为文本文档流。

      仅有3种状况会使得元素摆脱文本文档流,各自是:波动肯定精准定位相对性精准定位

静态数据精准定位(static) :

      static,无独特精准定位,它是html元素默认设置的精准定位方法,即大家不设置元素的position特性时默认设置的position值便是static,它遵照一切正常的文本文档流目标,目标占有文本文档室内空间,该精准定位方法下,top、right、bottom、left、z-index等特性是失效的。

相对性精准定位(relative) :

      relative精准定位,又称为相对性精准定位,从字面上来分析,大家便可以看出该特性的关键特点:相对性。可是它相对性的又是相对甚么地区而言的呢?这个是个关键,也是最使我迷糊的1个地区,如今让大家来做个检测,我想大伙儿都会搞清楚的:

(1) 原始待定位

拷贝编码
编码以下:

/******原始*********/
<style type="text/css">
#first { width: 200px; height: 100px; border: 1px solid red; }
#second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
<div id="first"> first</div>
<div id="second">second</div>
</body>

原始原图:

(2) 大家改动first元素的position特性:

拷贝编码
编码以下:

<style type="text/css">
#first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/
#second{width: 200px; height: 100px; border: 1px solid blue;}
</style>

偏位20px后:


-- >> 虚线是原始的部位室内空间

      如今看搞清楚了吧,相对性精准定位相对性的是它本来在文本文档流中的部位而开展的偏位,而大家也了解relative精准定位也是遵照一切正常的文本文档流,它沒有摆脱文本文档流,可是它的top/left/right/bottom特性是起效的,能够说它是static到absoult的1个正中间过渡特性,最关键的是它还占据文本文档室内空间,并且占有的文本文档室内空间不容易随 top / right / left / bottom 等特性的偏位而产生变化,也便是说它后边的元素是根据虚线部位( top / left / right / bottom 等特性起效以前)开展的精准定位,这点1定要了解。

     那好,大家了解了top / right / left / bottom 特性是不容易对relative精准定位的元素所占有的文本文档室内空间造成偏位,那末margin / padding会让该文本文档室内空间造成偏位吗?回答是毫无疑问的,大家1起来做个实验吧:

(3)   加上margin特性:

拷贝编码
编码以下:

<style type="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
#second{width: 200px;height:100px;border: 1px solid blue;}
</style>

设定margin:20px后:

 

比照1下,是否就很清楚了,大家先将first元素外边距设为20px,那末second元素就得向下偏位40px,因此margin是占有文本文档室内空间!同理,大伙儿能够自身动手能力测下padding的实际效果吧!

肯定精准定位(absoulte) :

       absoulte精准定位,也称为肯定精准定位,尽管它的姓名号曰“肯定”,可是它的作用却更贴近于"相对性"1词,为何这么讲呢?原先,应用absoult精准定位的元素摆脱文本文档流后,就只能依据先祖类元素(父类以上)开展精准定位,而这个先祖类还务必是以postion非static方法精准定位的, 举个事例,a元素应用absoulte精准定位,它会从父类刚开始找起,找寻以position非static方法精准定位的先祖类元素(留意,1定如果直系先祖才算哦~),直至<html>标识为止,这里还必须留意的是,relative和static方法在最外层时是以<body>标识为精准定位原点的,而absoulte方法在无父级是position非static精准定位时是以<html>做为原点精准定位。<html>和<body>元素相差9px上下。大家看来下实际效果:

(4) 加上absoulte特性:

拷贝编码
编码以下:

<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>

实际效果图:

        哈哈,看了上面的编码后,仔细的盆友毫无疑问要问了,为何absoulte精准定位要加 top:0; left:0; 特性,这并不是多此1举呢?

       实际上再加这两个特性是彻底必要的,由于大家假如应用absoulte或fixed精准定位的话,务必特定 left、right、 top、 bottom 特性中的最少1个,不然left/right/top/bottom特性会应用它们的默认设置值 auto ,这将致使目标遵循一切正常的HTML合理布局标准,在前1个目标以后马上被呈递简易讲便是都变为relative,会占有文本文档室内空间,这点十分关键,许多人应用absolute精准定位后发现沒有摆脱文本文档流便是这个缘故,这里要非常留意~~~

少了left/right/top/bottom特性不好,那假如大家多设了呢?比如,大家另外设定了top和bottom的特性值,那元素又该往哪偏位好呢?记牢下面的标准:

  • 假如top和bottom1同存在的话,那末仅有top起效。
  • 假如left和right1同存在的话,那末仅有left起效。

既然absoulte是依据先祖类中的position非static元素开展精准定位的,那末先祖类中的margin/padding会不容易对position造成危害呢?看个事例先:

(5) 在absoulte精准定位中加上margin / padding特性:

拷贝编码
编码以下:

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
#second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
<div id="first">first
<div id="second">second</div>
</div>

实际效果图:

看懂了,先祖类的margin会让子类的absoulte跟随偏位,而padding却不容易让子类的absoulte产生偏位。总结1下,便是absoulte是依据先祖类的border开展的精准定位。

       Note : 肯定(absolute)精准定位目标在可视性地区以外会致使翻转条出現。而置放相对性(relative)精准定位目标在可视性地区以外,翻转条不容易出現。

固定不动精准定位(fixed):

       fixed精准定位,又称为固定不动精准定位,它和absoult精准定位1样,都摆脱了文本文档流,而且可以依据top、right、left、bottom特性开展精准定位,但不一样的是fixed是依据对话框为原点开展偏位精准定位的,也便是说它不容易依据翻转条的翻转而开展偏位。

z-index特性:

       z-index,又称为目标的堆叠次序,它用1个整数金额来界定层叠的层级,整数金额值越大,则被堆叠在越上面,自然这是指同级元素间的层叠,假如两个目标的此特性具备一样的值,那末将根据它们在HTML文本文档中流的次序堆叠,写在后边的可能遮盖前面的。必须留意的是,父子关联是没法用z-index来设置左右关联的,1定是子级在上父级在下。

Note:应用static 精准定位或无position精准定位的元素z-index特性是失效的。