码迷,mamicode.com
首页 > 其他好文 > 详细

前端_day08

时间:2018-05-08 19:37:34      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:otto   原来   day   ati   文档流   就是   生效   一个   padding   

固定定位

一.定位

  1.position:定位,用来控制一个标签在整个页面中的位置

  2.static:无特殊定位,所有元素没有写position属性就是static此时,left,top,right,bottom属性都没用

  3.relative:

    1).相对定位,标签还在标准文档流中;

    2).相对定位可以指定元素相对于自己的原始位置,开启之后可以使用left,top,right,bottom,如果有冲突left/top 生效,right/bottom无效,left/top意思是距离自己原始位置顶部/左侧多远;

    3).其他元素不会把它原始的位置占用也就是说,标签真实的位置还是在原来的地方

  4.absolute:

    1).绝对定位,对象脱离标准文档流,浮动起来,可以使用top,bottom,left,right属性;

    2).绝对定位的参考系:使用top时定位是相对于页面的左上角;使用bottom时定位是相对于页面首屏的左下角

    3).一个绝对定位的元素,如果父容器也出现了定位(无论是相对还是绝对定位)那么将以这个父容器作为参考点,父容器子标签绝对定位的参考点是无视父标签padding的,直接
顶在边框位置

    4).以后用绝对定位,经常会发现"父相子绝",这种组合可以保证,要定位的元素,不会脱离父容器的范围,到处乱跑

  5.fixed:固定定位,对象脱标,以窗口为参考点定位,即使出现滚动条,也不会随着滚动,小广告首选  

前端_day08

标签:otto   原来   day   ati   文档流   就是   生效   一个   padding   

原文地址:https://www.cnblogs.com/memo-song/p/9009738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!