positions至死不渝(position你给我定住)

position:在网页(Web)中是定位的意思。在一个网页(Web)中定位(position)是很常见的,特别是动态的网页(Web)的时候,用的很多。在Web中定位(position)是一个属性,那么就会有属于它的属性值。

在Web中可能出现的属性值有:

static(静态定位):它是指默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

positions至死不渝(position你给我定住)(1)

静态定位(static)之前

positions至死不渝(position你给我定住)(2)

静态定位(static)之后

positions至死不渝(position你给我定住)(3)

静态定位(static)之后的代码

inherit(继承定位):它是指规定应该从父元素继承 position 属性的值。

positions至死不渝(position你给我定住)(4)

继承定位(inherit)之前

positions至死不渝(position你给我定住)(5)

继承定位(inherit)之后

positions至死不渝(position你给我定住)(6)

继承定位(inherit)之后的代码

relative(相对定位):它是指生成相对定位的元素,相对于其正常位置进行定位。例:"left:50" 的意思就是向元素的left 位置添加 50 像素,也就是相对于原先的位置向右移动了50像素。

positions至死不渝(position你给我定住)(7)

相对定位(relative)之前

positions至死不渝(position你给我定住)(8)

相对定位(relative)之后

positions至死不渝(position你给我定住)(9)

相对定位(relative)之后的代码

absolute(绝对定位):它是指生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。如果你想相对于它的父元素使用绝对定位(absolute),那么就需要在它的父元素上定义相对定位(relative)。

positions至死不渝(position你给我定住)(10)

绝对定位(absolute)之前

positions至死不渝(position你给我定住)(11)

绝对定位(absolute)之后

positions至死不渝(position你给我定住)(12)

绝对定位(absolute)之后的代码

fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位(不管你怎么移动滚动条,它相对于浏览器窗口不会改变,即相对于可视区的位置不会改变)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

positions至死不渝(position你给我定住)(13)

固定定位(fixed)之前

positions至死不渝(position你给我定住)(14)

固定定位(fixed)之后

positions至死不渝(position你给我定住)(15)

固定定位(fixed)之后的代码

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页