css知多少(11)——position

  • 时间:
  • 浏览:1

  

  有时候 相似情況下,相似按部就班的网页排版满足不了亲们的要求,亲们还要相似元素跑出来,悬浮在网页后边,有时候 还要给它指定一十个 位置。这前一天亲们就还要用到了position,有时候 是非用不可。如下图:

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

  说道absolute,推荐亲们去看一十个 视频教程,讲师对absolute讲的非常透彻,本文的相似内容也是参考了这篇教程,好东西亲们一并分享吗!

  上图中,亲们应该要识别出一十个 信息(相信大偏离 人会忽略第十个 信息)

  写了那末 多,感觉还是写的一定会很全面,肯能一定会很系统,很希望亲们把相似人的意见反馈给我。相似系列博客有无 相似教程的第一版,我计划后期抽时间会录制一十个 视频版,到前一天希望会更加全面系统相似。

  

  

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

原文:

  有时候 ,亲们把第一十个 <p>改为absolute,看看会所处哪几种变化。

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

  

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

  上文好多好多 有次提到了“定位上下文”,那末 它到底是一十个 哪几种东东?答案马上揭晓。

      

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

  相对定位relative可还会能用一十个 例子很轻松的演示出来。相似亲们写一十个 <p>,出来的样子亲们还会看要能知道。

  以上提到的信息,肯能展开来说,内容非常多,有时候 用文本时候 好描述,还是推荐亲们去看慕课网的那篇视频教程,讲的很有意思。

  

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

  5.3 absolute的定位

  

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

  

  有时候 有前一天设置top、left值并一定会定位的最佳处置方案。相似要我元素A紧跟在元素B的后边,可通过设置元素B为absolute,有时候 调整B的margin值来选着,从前更有速率。如下图:

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

  从后边的结果中,亲们能看出几点信息:

  查资料可知道,position一共有十个 可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素肯能不设置相似的position值,它的position值时候 static,有它跟那末 它一样。就不要 介绍了。

  relative元素的定位永远是相对于元素自身位置的,和相似元素没关系,时候 会影响相似元素。

  

  5.2 fixed的定位

  有时候 亲们在第一十个 <p>后边,去掉 position:relative有时候 设置left和top值,看相似<p>有哪几种变化。

  肯能那末 定位,亲们做出来的网页肯能是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有时候 通过float来浮动相似元素。做相似简单的网页从前就够了,相似N年前一天的yahoo,真是现在看来很low。

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

  

  有时候 ,relative会原因分析分析自身位置的相对变化,而还会影响相似元素的位置、大小的变化。这是relative的要点之一。还有第十个 要点,时候 relative产生一十个 新的定位上下文,下文有关于定位上下文的完整性介绍,这里可还会能先通过一十个 例子来展示一下区别:

  

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

  

  

  5.1 relative的定位

  本文将用一篇文章介绍position(定位),在学习position前一天,亲们应该去思考一十个 什么的问题:哪几种情況下亲们还要定位?肯能那末 定位将无法满足亲们怎么的需求?亲们要知道,被人类创创造创造发明来的每一十个 知识,一定会它的用途,一定会处置相似前一天遇到的什么的问题。

  fixed元素的定位永远是相对于浏览器边界的,和相似元素那末 关系。有时候 它具有破坏性,会原因分析分析相似元素位置的变化。

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

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