css知多少(11)——position

  • 时间:
  • 浏览:3
  • 来源:大发5分6合_大发5分6合官方

  话归正传,咱们还是拿后来那个例子说事儿,先写1个多多基本的页面——1个多多<p>

  

  

  fixed元素的定位永远是相对于浏览器边界的,和许多元素没法关系。如可让它具有破坏性,会意味分析许多元素位置的变化。

  肯能没法定位,大伙儿儿做出来的网页肯能是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有什么都通过float来浮动许多元素。做许多简单的网页什么都就够了,类式N年后来的yahoo,虽然现在看来很low。

  以上提到的信息,肯能展开来说,内容非常多,如可让用文本什么都好描述,还是推荐大伙儿儿去看慕课网的那篇视频教程,讲的很有意思。

  说道absolute,推荐大伙儿儿去看1个多多视频教程,讲师对absolute讲的非常透彻,本文的许多内容也是参考了这篇教程,好东西大伙儿儿同时分享吗!

  如可让,relative会意味分析自身位置的相对变化,而不用影响许多元素的位置、大小的变化。这是relative的要点之一。还有第3个要点,什么都relative产生1个多多新的定位上下文,下文有关于定位上下文的删剪介绍,这还会 能先通过1个多多例子来展示一下区别:

  从后边的结果中,大伙儿儿能看出几点信息:

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

  

  上图中的“某一层祖先元素”什么都该absolute元素的定位上下文。讲到这里,大伙儿儿上文中的那个图,大伙儿儿能看明白了吧?还有不明白的还会 留言给我。

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

  如可让许多状况下,你是什么 按部就班的网页排版满足不了大伙儿儿的要求,大伙儿儿时需许多元素跑出来,悬浮在网页后边,如可让时需给它指定1个多多位置。这后来大伙儿儿就时时需到了position,如可让是非用不可。如下图:

  

  

  如可让有后来设置top、left值并也有定位的最佳处里方案。类式愿意元素A紧跟在元素B的后边,可通过设置元素B为absolute,如可让调整B的margin值来确定,什么都更有波特率。如下图:

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

  相对定位relative还会 用1个多多例子很轻松的演示出来。类式大伙儿儿写1个多多<p>,出来的样子大伙儿儿不用看能够知道。

  查资料可知道,position一共有3个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素肯能不设置许多的position值,它的position值什么都static,有它跟没法它一样。就不用 介绍了。

  

  写了没法多,感觉还是写的也有很全面,肯能也有很系统,很希望大伙儿儿把本人的意见反馈给我。你是什么 系列博客是否你是什么 教程的第一版,我计划后期抽时间会录制1个多多视频版,到后来希望会更加全面系统许多。

  5.3 absolute的定位

  

  

  5.2 fixed的定位

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

      

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

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

  如可让,大伙儿儿把第1个多多<p>改为absolute,看看会所处哪此变化。

原文:

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

  

  如可让大伙儿儿在第1个多多<p>后边,加在position:relative如可让设置left和top值,看你是什么 <p>有哪此变化。

  5.1 relative的定位

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

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

  

  上图中,大伙儿儿应该要识别出1个多多信息(相信大每段人会忽略第3个信息)

  relative元素的定位永远是相对于元素自身位置的,和许多元素没关系,什么都会影响许多元素。

  

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

  本文将用一篇文章介绍position(定位),在学习position后来,大伙儿儿应该去思考1个多多现象图片:哪此状况下大伙儿儿时需定位?肯能没法定位将无法满足大伙儿儿如可的需求?大伙儿儿要知道,被人类创科学科学发明来的每1个多多知识,也有它的用途,也有处里许多后来遇到的现象图片。

  

  上文什么都次提到了“定位上下文”,没法它到底是1个多多哪此东东?答案马上揭晓。