加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

CSS position 属性

发布时间:2020-12-14 23:57:05 所属栏目:资源 来源:网络整理
导读:1. static 默认值。没有定位,元素出现在正常的流中(忽略 top,bottom,left,right 或者 z-index 声明)。 position 金黄色方块会在左上角显示,没有偏移。 2. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left","top","right" 以

1. static

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

position

金黄色方块会在左上角显示,没有偏移。

2. fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left","top","right" 以及 "bottom" 属性进行规定。

这个比较好理解,只和窗口有关,与父元素,文档流都无关。

position

小广告效果:

position ...<...<...<...<...<...<...<...<...<... ...<...<...<...<...<...<...<...<...<... ...<...<...<...<...<...<...<...<...<... ...<...<...<...<...<...<...<...<...<... ...<...<...<...<...<...<...<...<...<...

3. relative

生成相对定位的元素,相对于其正常位置进行定位。

相对元素正常应该在的位置移动,元素所占的空间位置不变,但是显示的位置发生偏移。

left是向右偏移,right是向左偏移(这么说好奇怪,但是…应该没错吧……),top向下偏移,bottom向上偏移。

position

4. absolute?

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(如果没有这样的父元素呢?emmm……应该是整个文档最外层的框……吧……

元素的位置通过 "left","right" 以及 "bottom" 属性进行规定。

absolute元素会附带??效果,同时,设置absolute后,元素会脱离文档流。

1. 如果不设置"left","right" 以及 "bottom",会显示在正常应该显示的位置。

position

2. 设置了偏移……(一下父元素全部指 static 定位以外的第一个父元素

设置了left 将以父元素的左边界为基准 向右偏移 垂直方向和之前相同。

设置了right 将以父元素的右边界为基准 向左偏移 垂直方向和之前相同。

设置了top 将以父元素的上边界为基准 向下偏移 水平方向和之前相同。

设置了bottom 将以父元素的下边界为基准 向上偏移 水平方向和之前相同。

position

5. others

inherit:继承父元素的值。

initial: 初始值,即默认值,static。

unset: 非继承属性,相当于initial,static。

6.?

_<

position <1. static 默认值。没有定位,元素出现在正常的流中。 <2. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 <3. relative 生成相对定位的元素,相对于其正常位置进行定位。 <4. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 <5. others inherit & initial & unset <6. navigation bar 根据定位写一个导航栏。

<div class="right-nav">

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读