技术控

    今日:261| 主题:58020
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] css之position

[复制链接]
入骨的麻木 投递于 2016-10-2 20:01:00
212 5
Created at 2016-08-21 Updated at 2016-10-02  CategoryFront-End   TagCSS  
  引言

   在学习 position 之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求
   如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过 margin 和 padding 调整一下间距,还有就是通过 float 来浮动某些元素。做一些简单的网页这样就够了,例如 N 年之前的 yahoo ,虽然现在看来很 low
   

css之position

css之position-1-技术控-position,absolute,relative,浏览器,yahoo

   但是有些情况下,这种按部就班的网页排版满足不了我们的要求,我们需要某些元素跑出来,悬浮在网页上面,而且需要给它指定一个位置。这时候我们就需要用到了 position ,而且是非用不可。
  relative

   position 一共有四个可选属性: static/relative/absolute/fixed 。其中 static (静态定位)是默认值,即所有的元素如果不设置其他的 position 值,它的 position 值就是 static
   relative 会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是 relative 的要点之一。还有第二个要点,就是 relative 产生一个新的定位上下文
  absolute

   

css之position

css之position-2-技术控-position,absolute,relative,浏览器,yahoo

  
       
  •   absolute 元素脱离了文档结构。和 relative 不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来, float 元素也会脱离文档结构)
       
  •   absolute 元素具有“包裹性”。之前 <p> 的宽度是撑满整个屏幕的,而此时 <p> 的宽度刚好是内容的宽度
       
  •   absolute 元素具有“跟随性”。虽然 absolute 元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置 top 、 left 的值
       
  •   absolute 元素会悬浮在页面上方,会遮挡住下方的页面内容
      
  注意:

  
       
  • 设置 absolute 会使得 inline 元素被“块”化   
  • 设置 absolute 会使得元素已有的 float 失效。不过 float 和 absolute 同时使用的情况不多   
  • 上文提到了 absolute 会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”  
  fixed

   其实 fixed 和 absolute 是一样的,唯一的区别在于: absolute 元素是根据最近的定位上下文确定位置,而 fixed 永远根据浏览器确定位置
  定位上下文

  relative的定位

   relative 元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素
   

css之position

css之position-3-技术控-position,absolute,relative,浏览器,yahoo

  fixed的定位

   fixed 元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化
   

css之position

css之position-4-技术控-position,absolute,relative,浏览器,yahoo

  absolute的定位

   absolute 的定位相对于前两者要复杂许多。如果为 absolute 设置了 top 、 left ,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了 position:relative/absolute/fixed 的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:
   

css之position

css之position-5-技术控-position,absolute,relative,浏览器,yahoo



上一篇:基础篇章:React Native之Flexbox的讲解(Height and Width)
下一篇:JavaScript中的this的一些用法
kjgjk 投递于 2016-10-3 02:36:30
刚看见一个妹子,很漂亮!
回复 支持 反对

使用道具 举报

百里梨花 投递于 2016-10-23 09:25:10
很给力!
回复 支持 反对

使用道具 举报

1458149157 投递于 2016-11-12 19:52:52
谁能明白谁的深爱,谁又能理解谁的离开...
回复 支持 反对

使用道具 举报

huya 投递于 2016-11-13 10:38:07
我也顶起出售广告位
回复 支持 反对

使用道具 举报

unhggfkk 投递于 2016-11-19 11:45:53
顶起出售广告位
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表