css知多少(11)——position

  • 时间:
  • 浏览:0
  • 来源:uu快3下载网站_uu快3开户二维码

  最后,再提十几个 小知识点。

  写了没人多,感觉还是写的算不算很全面,因为着分析算不算很系统,很希望我们 把当时人的意见反馈给我。你这个 系列博客算不算你这个 教程的第一版,我计划后期抽时间会录制一有另1个视频版,到前一天希望会更加全面系统一点。

原文:

  话归正传,咱们还是拿前一天那个例子说事儿,先写一有另1个基本的页面——有另1个<p>

-------------------------------------------------------------------------------------------------------------

  从里面的结果中,我们 能看出几点信息:

  上图中的“某一层祖先元素”所以该absolute元素的定位上下文。讲到这里,我们 上文中的那个图,我们 能看明白了吧?还有不明白的可还还都都都可否能留言给我。

  本文将用一篇文章介绍position(定位),在学习position前一天,我们 应该去思考一有另1个现象图片:你这个 状态下我们 时要定位?因为着分析没人定位将无法满足我们 怎样的需求?我们 要知道,被人类创发名来的每一有另1个知识,算不算它的用途,算不算正确处理一点前一天遇到的现象图片。

  查资料可知道,position一共有俩个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素因为着分析不设置一点的position值,它的position值所以static,有它跟没人它一样。就没人来太多介绍了。

  

  上文所以次提到了“定位上下文”,没人它到底是一有另1个你这个 东东?答案马上揭晓。

  一点,relative会因为着自身位置的相对变化,而太多影响一点元素的位置、大小的变化。这是relative的要点之一。还有第俩个要点,所以relative产生一有另1个新的定位上下文,下文有关于定位上下文的详细介绍,这里可还还都都都可否能先通过一有另1个例子来展示一下区别:

  注意看这两图的区别,下文将有解释。

  relative元素的定位永远是相对于元素自身位置的,和一点元素没关系,所以会影响一点元素。

  说道absolute,推荐我们 去看一有另1个视频教程,讲师对absolute讲的非常透彻,本文的一点内容也是参考了这篇教程,好东西我们 一同分享吗!

  一点我们 在第有另1个<p>里面,加上position:relative一点设置left和top值,看你这个 <p>有你这个 变化。

      

  

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

  

  

  一点,我们 把第有另1个<p>改为absolute,看看会发生你这个 变化。

  上图中,我们 应该要识别出有另1个信息(相信大每种人会忽略第俩个信息)

  最后,通过给absolute元素设置top、left值,可自定义其内容,你这个 算不算平时比较常用的了。这里时要注意的是,设置了top、left值时,元素是相对于最近的定位上下文来定位的,而算不算相对于浏览器定位。下文马上会讲定位上下文。

  

  以上提到的信息,因为着分析展开来说,内容非常多,一点用文本所以好描述,还是推荐我们 去看慕课网的那篇视频教程,讲的很有意思。

  一点有前一天设置top、left值并算不算定位的最佳正确处理方案。类似让你元素A紧跟在元素B的里面,可通过设置元素B为absolute,一点调整B的margin值来选着,从前更有速率。如下图:

  5.1 relative的定位

  一点一点状态下,你这个 按部就班的网页排版满足不了我们 的要求,我们 时要一点元素跑出来,悬浮在网页里面,一点时要给它指定一有另1个位置。这前一天我们 就时要用到了position,一点是非用不可。如下图:

  5.3 absolute的定位

  

也欢迎关注我的开源项目——wangEditor,简洁易用的web富文本编辑器

  我感觉position这篇文章是你这个 系列中最难写的文章,它的知识点比较多,一点非常难理解,一点position也是css的一有另1个重点知识,不懂position的前端开发人员要抓紧恶补一下。

  

  相对定位relative可还还都都都可否能用一有另1个例子很轻松的演示出来。类似我们 写有另1个<p>,出来的样子我们 太多看还还都都都可否知道。

欢迎关注我的教程:《从设计到模式》深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

  

-------------------------------------------------------------------------------------------------------------

  

  

  fixed元素的定位永远是相对于浏览器边界的,和一点元素没人关系。一点它具有破坏性,会因为着一点元素位置的变化。

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

  

  

  因为着分析没人定位,我们 做出来的网页因为着分析是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有所以通过float来浮动一点元素。做一点简单的网页从前就够了,类似N年前一天的yahoo,嘴笨 现在看来很low。

  5.2 fixed的定位