前端——定位

一丶html文档流

:块元素垂直排列,内联元素水平排列

二丶定位什么时候用?

一般用在元素叠加(也就是说一个div 里边还有一个div 这就是相互叠加在一起了,要对里边的div进行调整位置 就用到定位)

三丶定位类型及其介绍:

(1)position static 无定位
(2)position retive 相对定位 :相对自己原来的位置进行微调,是半脱离标准流,原来的位置依然保留
(3)position absolute 绝对定位 :绝对定位是在该元素的某个上级内定位。并且这个上级需要具备定位属性,一般情况设置该上级的定位属性为相对定位。绝对定位完全脱离标准流,原来位置不再站位
(4)*position fixed 固定定位 固定定位完全脱离标准流,不再站位,top/bottom/left/right 相对窗口来说 一般用于网站的侧导航或者是广告位
(5)&&绝大多数情况下 相对定位和绝对定位进行使用
(6) 定位了的元素都会变成行内块元素
(7)定位参数:top /bottom left/right
(8)z-index 属性设置元素的堆叠顺序。(来自W3school)
a.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
b.元素可拥有负的 z-index 属性值。
c.Z-index 仅能在定位元素上奏效(例如 position:absolute;)
d.该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

四丶例子

(1)未定位之前:
在这里插入图片描述
**绝对定位:**比如要让黄色div 定位到距离红色div 左2opx 使用绝对定位效果图如下 (如果不需要移动到left或者top 那也给一个0px;)

在这里插入图片描述
(2)固定定位效果如下
在这里插入图片描述
在这里插入图片描述
**解释:**把网页下拉的时候 导航栏不会不见 就一直固定在这个位置 ,多用于侧边导航栏 或者其他图标,比如58同城网右边这个小小导航栏
在这里插入图片描述
(3)z-index 参考W3shool[http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex]

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试